CSS background-size 属性

CSS background-size 属性用于设置元素背景图像的尺寸大小。当背景图片大小与元素大小不匹配时，可使用此属性进行调整。

语法

background-size: auto|length|cover|contain|initial|inherit;

属性值说明：

• auto：背景图像在其本来的大小之下显示；

• length：设置背景图像的高度和宽度的长度值。可以使用 px、em、rem 等长度单位；

• cover：背景图像保持比例缩放，以完全覆盖元素区域，可能会出现背景图像某些部分不可见；

• contain：背景图像保持比例缩放，以完全包含元素区域，可能会出现元素某些部分不可见；

• initial：属性设置为它的初始值；

• inherit：继承父级元素的属性值。

示例

调整背景图片大小

background-size: 100px 150px; 
/* 将背景图片的大小设置为 100px x 150px */

background-size: cover; 
/* 背景图片按比例缩放，以填充整个元素区域（可能会出现背景图像某些部分不可见） */

background-size: contain; 
/* 背景图片按比例缩放，以完整包含元素区域（可能会出现元素某些部分不可见） */

使用 background-size 与 background-position

background-image: url('image.jpg');
background-size: cover;
background-position: center;
/* 背景图片按比例缩放，以填充整个元素区域并水平、垂直居中 */

总结

background-size 属性可用于调整背景图片的尺寸大小。cover 和 contain 值可实现背景图片的等比缩放，并分别填充或包含元素区域，但可能会出现部分区域不可见。在实际开发中，应结合 background-position 属性一起使用。