background-image 没有出现在 header

Question

我想添加 background-image 到 <header> 标签，但是图像不显示。

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

当我进入 Chrome 中的开发人员工具时，我可以看到图像的 URL 很好（我可以看到图像），但让我感到困惑的是，当我添加

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

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

Answer 1

使用相同的背景属性只会反映color.So参考下面的代码：

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 is a short hand css property, It will override all other previous styles.

您的代码应该是：

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`

background-image 没有出现在 header

background-image not showing up in header

css

background-image