[分享]css中如何控制背景圖片大小

在CSS中，我们可以使用backgroundsize属性来控制背景图片的大小。该属性可以接受不同的值来设置背景图片的尺寸，下面是一些常用的值：1. cover：背景图片会被放大或缩小以完全覆盖容器，并...

在CSS中，我们可以使用background-size属性来控制背景图片的大小。该属性可以接受不同的值来设置背景图片的尺寸，下面是一些常用的值：
1. cover：背景图片会被放大或缩小以完全覆盖容器，并保持图片比例不变。
2. contain：背景图片会被放大或缩小以适应容器，并保持图片比例不变。
3. 指定大小：可以使用像素或百分比等单位，如background-size: 100px 50px；或background-size: 50% 50%；来设置背景图片的宽度和高度。
下面是一些代码示例，我们可以在pre标签内查看具体的实现方式：

/* 将背景图片缩小至容器的一半大小 */
p {
  background-size: 50% 50%;
}

/* 将背景图片放大到和容器一样大 */
p {
  background-size: cover;
}

/* 将背景图片包含在容器内，保持背景图片比例不变 */
p {
  background-size: contain;
}

/* 指定背景图片的宽度和高度 */
p {
  background-size: 100px 50px;
}