background-size 是一个 CSS 属性,用于控制元素背景图像的大小。这个属性可以指定背景图像的宽度和高度,以适应元素的背景区域。

background-size 属性可以采用以下几种形式:

1. 关键字值:
   - auto:保持背景图像的原始大小。
   - cover:使背景图像尽可能大,同时保持其宽高比,并覆盖整个背景区域。
   - contain:使背景图像尽可能大,同时保持其宽高比,并在背景区域内完全包含。

2. 长度值:
   - 使用像素(px)或其他长度单位,例如 background-size: 100px 50px;,表示背景图像的宽度为 100 像素,高度为 50 像素。

3. 百分比值:
   - 使用百分比值,例如 background-size: 50% 75%;,表示背景图像的宽度为元素宽度的 50%,高度为元素高度的 75%。

示例:
.element {
  background-image: url('background-image.jpg');
  background-size: cover;
}

在这个例子中,.element 元素的背景图像使用 background-image 属性指定为 'background-image.jpg',并使用 background-size: cover; 让背景图像尽可能大,并覆盖整个背景区域。

通过使用 background-size,你可以根据设计需求控制背景图像在元素中的尺寸。


转载请注明出处:http://www.zyzy.cn/article/detail/4117/CSS