html - CSS 背景图像未显示

Question

我知道这是 StackOverflow 上的一个常见问题，但我之前看到的所有答案均无效。我有这个 CSS 代码:

.header{
    padding: 0px 0;
    position: relative;
    display: table;
    background-size: 100% 100%;
    width: 1920px;
    height: 600px;
    background-image: url(backgroundheader.png);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover

}

然后我在 HTML 文件上创建了这个标签:

<header id = "header">

</header>

但是背景图片没有出现。 html 和 css 文件位于 backgroundheader.png 所在的同一文件夹中。

Answer 1

您将 id 分配给 header 元素，并在 css 中为 header 类定义了属性。

只需将 .header 更改为 #header

#header {
  padding: 0px 0;
  position: relative;
  display: table;
  background-size: 100% 100%;
  width: 1920px;
  height: 600px;
  background-image: url(https://lorempixel.com/1000/1000/);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

<header id="header">

</header>

或 id='header' 到 class='header' :

.header {
  padding: 0px 0;
  position: relative;
  display: table;
  background-size: 100% 100%;
  width: 1920px;
  height: 600px;
  background-image: url(https://lorempixel.com/1000/1000/);
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

<header class="header">

</header>