17370845950

background-size用于控制背景图尺寸，可设cover（覆盖裁剪）或contain（完整显示），支持像素、百分比等值，常用于响应式设计。

在CSS中，background-size 属性用于控制背景图片的尺寸。通过它，你可以让背景图适应容器大小、保持比例拉伸，或进行裁剪显示。这个属性对响应式设计特别有用。

基本语法

background-size 可以接受一个或两个值：

• 如果提供一个值，表示宽度，高度自动为 "auto"
• 如果提供两个值，第一个是宽度，第二个是高度

常用取值方式

1. 关键字：cover 和 contain

cover： 背景图等比缩放，完全覆盖容器。可能会有部分图片被裁剪。 contain： 背景图等比缩放，完整显示在容器内。可能会留白。

示例：

div {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
}

这常用于全屏背景图，确保图片填满整个区域。

2. 具体尺寸：像素、百分比、rem 等

固定尺寸： background-size: 200px 150px; —— 设置具体宽高 百分比： background-size: 50% 100%; —— 相对于容器的尺寸

注意：百分比是相对于元素的背景定位区域（通常是 padding box）。

3. auto 值

background-size: auto; —— 使用图片原始尺寸 background-size: 100px auto; —— 宽度设为100px，高度按比例调整

实用技巧

响应式背景图： 用 cover 或 100% 100% 配合 background-position:center 实现居中填充 图标适配： 在小图标上使用精确像素值，如 background-size: 16px 16px; 避免变形： 尽量使用 cover、contain 或保持一个方向为 auto 来维持图片比例

基本上就这些。合理使用 background-size 能让你的背景图在各种设备上都表现良好。不复杂但容易忽略细节。