Question

我知道这是StackOverflow上的一个常见问题，但我之前看到的答案都没有用。我有这个CSS代码：

<header id = "header">

</header>

然后我在HTML文件上创建了这个标记：

{{1}}

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

Answer 1

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

只需将.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>

Answer 2

有多种方法可以实现这个目标

第一种方法：

HTML

<header class = "header">
</header>

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>

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>
</header>

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
}

如果是

class =＆gt; .header
id =＆gt;的#header
标头标签=＆gt;头

Answer 3

您已声明了一个css类，但将其用作id。所以这个css不起作用。

在html页面中尝试这个

<header class= "header">

</header>

Answer 4

更改你的html：

<header class = "header">

</header>

或您的选择器：

[id="header"]

或的#header

顺便说一句。如果您只有一个标题，则可以将header写为选择器

您也可以使用body>header（对于主标题）等。您可能不需要ID和类。

<强>顺便说一句。您可以删除此内容：

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

https://caniuse.com/#feat=background-img-opts全绿！

Answer 5

您需要从**类更改为 ID 符号：**

#header {
  .....
}
<header id="header">

</header>

CSS背景图像未显示

5 个答案: