Question

我想将背景图片添加到<header>标记，但图片不显示。

header {
    background-image: url("/img/header-bg.jpg");
    background-repeat: repeat-x;
    width: 100%;
    height: 105px;
    background: #fff;
    position: relative;
    display:block
}

当我访问Chrome中的开发者工具时，我可以看到图片的网址很好（我可以看到图片），但令我感到困惑的是，当我添加

时

background-image: url("/img/header-bg.jpg");
background-repeat: repeat-x;

作为Chrome中header的新样式规则，背景图片显示。

Answer 1

使用相同的背景属性仅反映颜色。请参阅以下代码：

header {
  background:#fff url("/img/header-bg.jpg") repeat-x;
  background-repeat: repeat-x;
  width: 100%;
  height: 105px;
  position: relative;
}

Answer 2

将background属性更改为background-color，或者根据需要将其删除。

background是一个简短的css属性，它将覆盖所有其他先前的样式。

您的代码应为：

header {
  background-image: url("/img/header-bg.jpg");
  background-repeat: repeat-x;
  background-color: #fff;
  width: 100%;
  height: 105px;
  position: relative;
  display:block

}

或以简写形式如下：

header {
  background: #fff url("/img/header-bg.jpg") repeat-x;
  width: 100%;
  height: 105px;
  position: relative;
  display:block

}

Answer 3

.heaer_area {
    background-attachment:fixed;
    background-clip: border-box;
    background-color: #000000;
    background-image: url("img/fitness.jpg");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: cover;
}`enter code here`

背景图像没有显示在标题中

3 个答案: