css - 背景图像未显示在标题中

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 中的开发人员工具时，我可以看到图像的 URL 很好(我可以看到图像)，但让我感到困惑的是，当我添加

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

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

Answer 1

将 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