CSS3 background-size 属性

background-size 属性用于设置背景图像的大小。它可以让你控制背景图像的尺寸，以便适应元素的大小。

语法

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

• length：指定背景图像的宽度和高度，可以使用像素（px）、英寸（in）、厘米（cm）等单位。
• percentage：指定背景图像的宽度和高度，以父元素的百分比为基准。
• cover：背景图像将被缩放以完全覆盖元素的内容框，可能会导致图像被裁剪。
• contain：背景图像将被缩放以适应元素的内容框，可能会导致元素的某些区域未被填满。
• initial：设置属性为默认值。
• inherit：继承父元素的属性值。

示例

// www.javascriptcn.com code example
/* 使用像素值设置背景图像大小 */
div {
  background-image: url('background.jpg');
  background-size: 200px 100px;
}

/* 使用百分比设置背景图像大小 */
div {
  background-image: url('background.jpg');
  background-size: 50% 50%;
}

/* 使用 cover 值 */
div {
  background-image: url('background.jpg');
  background-size: cover;
}

/* 使用 contain 值 */
div {
  background-image: url('background.jpg');
  background-size: contain;
}

注意事项

• 当使用 cover 值时，背景图像可能会被裁剪，确保选择合适的图像。
• 当使用 contain 值时，背景图像可能不会填满整个元素，可以考虑调整背景图像的尺寸或者元素的大小。
• 在移动端开发中，可以使用百分比来设置背景图像的大小，以适应不同屏幕尺寸的需求。