3.1 属性 background-repeat
CSS 中的background-repeat和background-size属性用来管理背景图像在元素内的重复和缩放方式。这些属性为 web 开发者提供了灵活调整背景视觉效果的工具。让我们详细看看每一个。
background-repeat属性定义了背景图像在元素中的重复方式。默认情况下，背景图像在水平和垂直方向上都重复。
值
repeat: 图像水平和垂直重复（默认）repeat-x: 图像仅水平重复repeat-y: 图像仅垂直重复no-repeat: 图像不重复
1. 值 repeat:
在水平和垂直方向上重复图像。
CSS
.repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat;
border: 1px solid #000;
}
HTML
<div class="repeat">在水平和垂直方向上重复</div>
2. 值 repeat-x:
图像仅水平重复。
CSS
.repeat-x {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-x;
border: 1px solid #000;
}
HTML
<div class="repeat-x">仅水平方向重复</div>
3. 值 repeat-y:
图像仅垂直重复。
CSS
.repeat-y {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: repeat-y;
border: 1px solid #000;
}
HTML
<div class="repeat-y">仅垂直方向重复</div>
4. 值 no-repeat:
图像不重复。
CSS
.no-repeat {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-repeat: no-repeat;
border: 1px solid #000;
}
HTML
<div class="no-repeat">不重复</div>
代码解释
.repeat: 图像水平和垂直重复，填满整个元素.repeat-x: 图像仅水平重复.repeat-y: 图像仅垂直重复.no-repeat: 图像不重复，只显示一次
3.2 属性 background-size
background-size属性用于控制背景图像的大小。它允许我们调整图像大小，让其更好地适应元素。
值：
auto: 图像大小自动确定（默认）cover: 图像缩放以完全覆盖元素，保持比例contain: 图像缩放以完全适应元素，保持比例- 绝对值: 比如 100px 50px 设置图像的宽度和高度为像素单位
- 百分比值: 比如 50% 50% 设置图像宽度和高度为元素大小的百分比
1. 默认大小 (auto):
图像大小自动确定（默认）。
CSS
.size-auto {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/50');
background-size: auto;
border: 1px solid #000;
}
HTML
<div class="size-auto">默认大小 (auto)</div>
2. cover:
图像缩放以完全覆盖元素，保持比例。
CSS
.size-cover {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: cover;
border: 1px solid #000;
}
HTML
<div class="size-cover">缩放以覆盖元素 (cover)</div>
3. contain:
图像缩放以完全适应元素，保持比例。
CSS
.size-contain {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: contain;
border: 1px solid #000;
}
HTML
<div class="size-contain">完全适应缩放 (contain)</div>
4. 绝对值:
比如，100px 50px 设置图像的宽度和高度为像素单位。
CSS
.size-pixels {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 100px 50px;
border: 1px solid #000;
}
HTML
<div class="size-pixels">像素大小 (100px 50px)</div>
5. 百分比值:
比如，50% 50% 设置图像宽度和高度为元素大小的百分比。
CSS
.size-percent {
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/150');
background-size: 50% 50%;
border: 1px solid #000;
}
HTML
<div class="size-percent">百分比大小 (50% 50%)</div>
代码解释：
.size-auto: 图像大小自动确定.size-cover: 图像缩放以完全覆盖元素，保持比例。部分图像可能被裁剪.size-contain: 图像缩放以完全适应元素，保持比例。图像完全可见，但可能有空白区域.size-pixels: 图像大小用像素设置（宽度为 100px，高度为 50px）.size-percent: 图像大小用元素尺寸的百分比设置（宽度为 50%，高度为 50%）
3.3 联合使用 background-repeat 和 background-size
background-repeat和background-size属性经常结合使用，以达到想要的背景图像显示效果。
使用示例：
CSS
.combined {
width: 300px;
height: 300px;
background-image: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: cover;
border: 1px solid #000;
}
HTML
<body>
<div class="combined">背景图像不重复，并缩放以覆盖元素</div>
</body>
代码解释：
background-repeat: no-repeat;: 图像不重复background-size: cover;: 图像缩放以完全覆盖元素，保持比例。部分图像可能被裁剪
GO TO FULL VERSION