标题背景图像不会显示答案

【问题标题】：Header Background Image Won't Show标题背景图像不会显示
【发布时间】：2020-02-13 11:34:49
【问题描述】：

我有一个带有背景网址的标题，但它不会显示。代码如下。

理想的结果是让标题有一个背景图像，上面显示徽标和导航。所以文字被写在了背景图片上。

header {
  height: 600px;
  width: 100%;
  background: url("img/headerbg.jpg") cover no-repeat;
}

.header-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.logo {
  width: 10em;
}

nav {
  vertical-align: middle;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline;
}

nav ul li a {
  font-size: 1.2em;
  color: #80797F;
  padding: 1em;
  text-decoration: none;
}

nav ul li a:hover {
  color: #5CC6FF;
}

<header>
  <div class="header-bar">
    <div class='logo'>
      <a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class='header-text'>
    <h3>Welcome to our studio</h3>
    <h1>It's Nice To Meet You</h1>
    <button>Tell Me More</button>
  </div>
</header>

【问题讨论】：

几乎可以肯定是路径问题。试试url("../img/headerbg.jpg")
你没有关闭你的锚标签<a href='index.html'>。或许能解决问题

标签： html css image header

【解决方案1】：

请看下面的代码

header{
    height: 600px;
    width: 100%;
    background: url("https://image.shutterstock.com/image-photo/summer-beach-holiday-online-shopping-260nw-461355724.jpg") no-repeat;
    background-size: cover;
}
.header-bar{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.logo{
    width: 10em;
}
nav{
    vertical-align: middle;
}
nav ul{
    list-style: none;
}
nav ul li{
    display: inline;
}
nav ul li a{
    font-size: 1.2em;
    color: #80797F;
    padding: 1em;
    text-decoration: none;
}
nav ul li a:hover{
    color: #5CC6FF;
}

<header>
    <div class="header-bar">
    <div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></div>
    <nav>
      <ul>
        <li><a href='#Services'>Services</a></li>
        <li><a href='#Portfolio'>Portfolio</a></li>
        <li><a href='#About'>About</a></li>
        <li><a href='#Team'>Team</a></li>
        <li><a href='#Contact'>Contact</a></li>
      </ul>
    </nav>
  </div>
    <div class='header-text'>
      <h3>Welcome to our studio</h3>
      <h1>It's Nice To Meet You</h1>
      <button>Tell Me More</button>
    </div>
  </header>

请更新下面的css和标题背景图片显示

header{
height: 600px;
width: 100%;
background: url(images/headerbg.jpg) no-repeat;
background-size: cover;

}

【讨论】：

这并没有解决问题

【解决方案2】：

我认为html代码似乎有问题..请关闭锚标记..

<div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>

【讨论】：

【解决方案3】：

试试这个：

header{
    height: 600px;
    width: 100%;
    background: url("img/headerbg.jpg") no-repeat;
    background-size: cover;
}

HTML 中的错误

<div class='logo'><a href='index.html'><img src="img/logo.svg" alt="Logo"></a></div>

【讨论】：

您是在笔记本电脑上工作还是在服务器上工作？ "cover" 必须写在单独的属性中： background-size: cover;
试试这个：背景：url("../img/headerbg.jpg") no-repeat;