我正在努力缩短背景图像位置(居中)和背景大小(封面)的 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;
}
我想缩短/删除 center center 和 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);
}
我做错了什么?
最佳答案
您正在覆盖整个 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>
关于css - 预定义CSS背景图片中心中心位置和封面背景大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35888871/