CSS background-size

background-size

菜鸟教程 CSS3 background-size 属性

MDN Web 开发技术>CSS：层叠样式表>background-size

CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%；

在CSS中，background-size属性用于设置背景图片的大小。这个属性允许你指定背景图片应该如何缩放以适应其容器元素的大小。以下是background-size属性的一些常用值和它们的行为：

1. 具体数值：你可以指定具体的宽度和高度（如background-size: 300px 200px;），这会将背景图片缩放到指定的尺寸。如果只提供一个数值，第二个数值将默认为auto，此时图片将保持其原始的宽高比。

2. 百分比：你可以使用百分比值（如background-size: 50% 100%;）来根据容器元素的大小缩放背景图片。百分比是相对于容器元素的宽度和高度的。

3. cover：background-size: cover;将使背景图片扩展至足够大，以完全覆盖容器元素。如果容器元素的宽高比与图片的宽高比不同，图片将被裁剪以适应容器。

4. contain：background-size: contain;将使背景图片缩放至最大尺寸，同时保持其原始的宽高比，以确保图片完全适应容器元素。这可能会在容器内留下空白空间，因为图片不会被裁剪或拉伸以填充整个容器。

5. auto：background-size: auto;是默认值，意味着背景图片将保持其原始的尺寸，不进行任何缩放。如果同时设置了宽度和高度，并且其中一个值为auto，那么该维度将根据图片的宽高比和另一个维度的值来计算。

6. initial / inherit：这些值分别将属性设置为其初始值或从父元素继承值，但它们在实际使用中较少见，因为通常你会想要明确指定背景图片的大小。

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

/* 使用具体数值设置背景图片大小 */
.element1 {background-image: url('image1.jpg');background-size: 200px 150px;
}/* 使用百分比设置背景图片大小 */
.element2 {background-image: url('image2.jpg');background-size: 50% 100%;
}/* 使用cover设置背景图片大小以完全覆盖容器 */
.element3 {background-image: url('image3.jpg');background-size: cover;
}/* 使用contain设置背景图片大小以适应容器，可能留下空白 */
.element4 {background-image: url('image4.jpg');background-size: contain;
}

在这些例子中，.element1、.element2、.element3和.element4是应用了不同背景图片大小设置的CSS类。你需要将这些类应用到HTML元素上，以便在页面上看到效果。同时，确保替换url('imageX.jpg')中的占位符为你实际的图片路径。

CSS的background-size属性用于控制背景图片的尺寸。它可以通过不同的属性值来改变背景图片的呈现大小。以下是background-size属性的介绍：

1. contain：将背景图片缩小以适应元素的尺寸，同时保持图片的长宽比。这样可以确保整个图片都能完整显示在元素内部。

2. cover：将背景图片扩展以填满整个元素，同时保持图片的长宽比。这样可以确保整个元素都被图片覆盖，但可能会有部分图片被裁剪。

3. 100px 100px：将背景图片调整到指定的大小，以像素为单位。第一个值表示宽度，第二个值表示高度。

4. 50% 100%：将背景图片调整到指定的大小，以百分比相对于包含元素的尺寸。第一个值表示宽度，第二个值表示高度。

以下是一个使用background-size属性的例子：

div {background-image: url("image.jpg");background-size: contain;
}

这个例子将一个名为image.jpg的背景图片应用到一个div元素上，并使用contain属性值来缩小图片以适应div元素的尺寸。