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

Posted 2023-05-08

【中文标题】预定义 CSS 背景图片中心位置和覆盖背景大小

【英文标题】：Pre-define CSS background image center center position and cover background size

【发布时间】：2016-06-23 16:00:50

【问题描述】：

我正在努力缩短背景图像位置（中心中心）和背景大小（封面）的 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); 

我做错了什么？

【参考方案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>

【讨论】：

它不起作用，图像没有对齐div的中心，而是左上角

【参考方案2】：

你需要使用 background-image 而不是使用背景属性。

.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); 

【讨论】：

它不起作用，图像没有对齐div的中心，而是左上角

不用提background-position: center center; 就行了background-position: center;

尝试删除background-position: center;

现在这很有趣，它是一个非常小的错误..专注于你的 css 在线 background-repeat: no-repeat 问题是 ; 不存在添加 ; 它很好

呸呸呸呸！如此愚蠢的错误！真的很抱歉在此浪费您的时间，但很高兴您的努力！谢谢！