[分享]background-image设置图片大小

在CSS中，backgroundimage 属性用于设置元素的背景图片。如果你想要控制背景图片的大小，可以使用 backgroundsize 属性。这个属性允许你指定背景图片的尺寸，相对于包含它的元素...

在CSS中，background-image 属性用于设置元素的背景图片。如果你想要控制背景图片的大小，可以使用 background-size 属性。这个属性允许你指定背景图片的尺寸，相对于包含它的元素。

以下是一些常用的 background-size 属性值：

1. cover：这是默认值。背景图片会被缩放以完全覆盖元素，同时保持其宽高比。可能会被裁剪以适应元素的尺寸。

2. contain：背景图片会被缩放以完全适应元素，同时保持其宽高比。可能会在元素的某些部分显示空白。

3. auto：背景图片的尺寸不会被改变，即使它超出了元素的边界。

4. 百分比：你可以指定一个百分比值来控制背景图片的尺寸。例如，background-size: 50%; 会使背景图片的宽度和高度都缩小到原始尺寸的50%。

5. 长度：你可以指定具体的尺寸，如 background-size: 100px 200px;，这会设置背景图片的宽度为100像素，高度为200像素。

6. 最大值/最小值：你可以使用 min-width、max-width、min-height、max-height 等属性来设置背景图片的最大或最小尺寸。

下面是一个例子，展示如何使用 background-size 属性：

.element {
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 或者使用其他值，如 'contain', '50%', '100px 200px' 等 */
}

请注意，background-size 属性是在CSS3中引入的，所以它可能不被旧版本的IE浏览器支持（IE9及以下版本）。如果你需要在旧版IE中使用这个属性，可能需要使用特定的技巧或回退方案。