预定义CSS背景图片居中位置和覆盖整个背景大小

Question

我正在努力缩短我的CSS代码，以便设置背景图片的位置（居中）和大小（覆盖）。

每当我使用以下代码时，它显然可以正常工作：

HTML：

<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

CSS（层叠样式表）：

.banner-divider{
width: 100%;
height:600px;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-second{
background: url(/images/second.jpg) no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

我想缩短/删除多个CSS重复的居中和覆盖属性（因为我有多个横幅ID，但具有重复的背景设置），但是以下代码无法正确地将图像居中并覆盖：

HTML:

<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

CSS：

.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat
background-position: center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg); 
}
#banner-divider-second{
background: url(/images/second.jpg); 
}

我做错了什么？

- rainerbrunotte

Answer 1

你正在覆盖整个background属性。应该使用background-image代替。

.banner-divider{
    width: 100%;
    height:600px;
    background: #fff;
    background-image: none;
    background-repeat: no-repeat; /* <- missing semi-colon */
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#banner-divider-welcome{
    background-image: url(/images/welcome.jpg); /* <- here */ 
}
#banner-divider-second{
    background-image: url(/images/second.jpg);  /* <- and here */
}

.banner-divider{
    width: 100%;
    height:600px;
    background: #fff;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#banner-divider-welcome{
    background-image: url(https://placeimg.com/100/100/any);
}
#banner-divider-second{
    background-image: url(https://placeimg.com/150/150/any);
}

<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

- Moob

---

它不起作用，图像未在div中心对齐，而是在顶部左侧。 - rainerbrunotte

Answer 2

您需要使用background-image而不是使用background属性。

.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat;
background-position: center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background-image: url(/images/welcome.jpg); 
}
#banner-divider-second{
background-image: url(/images/second.jpg); 
}

- Gaurav Aggarwal

---

它不起作用，图像未在div中心对齐，而是在顶部左侧。 - rainerbrunotte

无需提及 background-position: center center;，只需将其更改为 background-position: center; - Gaurav Aggarwal

我知道现在很烦人，但如果您能为此创建一个 Fiddle 链接，我现在需要解决这个问题。 - Gaurav Aggarwal

现在这很有趣，只是一个非常小的错误...专注于你的CSS，在background-repeat: no-repeat行上，问题是;不在那里，请添加;就可以了。 - Gaurav Aggarwal

哈哈，太愚蠢了！非常抱歉浪费了你的时间，但是你的努力受到赞赏！谢谢！ - rainerbrunotte