文章目录
- 一、`background-size` 属性概述
- 1. 属性简介
- 二、`background-size` 属性的基本用法
- 1. 使用 `auto` 保持原始大小
- 2. 使用 `cover` 完全覆盖背景
- 3. 使用 `contain` 适应背景
- 4. 使用百分比或具体尺寸
- 三、`background-size` 的详细解析
- 1. `auto` 的详细解释
- 2. `cover` 与 `contain` 的比较
- 3. 指定宽度和高度
- 4. 动态尺寸计算
- 四、响应式设计中的应用
- 1. 使用 `cover` 实现自适应背景
- 2. 使用 `contain` 保证图片完整显示
- 五、多个背景图片的使用
- 六、`background-size` 与其他属性的配合
- 1. 与 `background-position` 的配合
- 2. 与 `background-repeat` 的配合
- 七、注意事项
- 1. 图片比例的影响
- 2. 性能影响
- 八、总结
background-size是 CSS 中一个非常重要的属性，用于控制元素背景图片的尺寸。通过设置background-size，开发者可以根据布局需求，灵活地调整背景图像的大小，创造出更加丰富和美观的页面效果。
一、background-size 属性概述
1. 属性简介
background-size 属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。
background-size 可以接受以下几种值：
auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。- 指定尺寸：你可以直接设定背景图片的宽度和高度，如
100px 200px或50% 50%，甚至还支持calc()函数进行动态计算。
二、background-size 属性的基本用法
下面我们来看几个基本的使用案例：
1. 使用 auto 保持原始大小
.example-auto {
background-image: url('image.jpg');
background-size: auto;
}
在这个例子中，背景图片的大小保持其原始尺寸，图片既不会缩放也不会拉伸，直接根据图片的实际大小显示。
2. 使用 cover 完全覆盖背景
.example-cover {
background-image: url('image.jpg');
background-size: cover;
}
cover 值会将背景图片缩放到足够大，以确保它能够覆盖整个元素背景。如果背景图片的比例与元素不同，部分图片可能会被裁剪。
3. 使用 contain 适应背景
.example-contain {
background-image: url('image.jpg');
background-size: contain;
}
与 cover 不同，contain 值会确保整个背景图片都显示在元素背景中，图片不会被裁剪，但这可能导致元素中留有空白区域。
4. 使用百分比或具体尺寸
.example-size {
background-image: url('image.jpg');
background-size: 50% 50%;
}
这里，背景图片的宽度和高度分别设定为元素尺寸的 50%，即使图片的比例与元素不匹配，仍会按比例缩放。
三、background-size 的详细解析
1. auto 的详细解释
当使用 auto 时，背景图片的尺寸不会被改变。即便容器的大小发生变化，背景图片也不会跟随改变。因此，auto 更适合用于设计中背景图片尺寸精确控制的场景，尤其是那些需要背景与实际内容比例保持一致的布局。
2. cover 与 contain 的比较
cover：使用cover值时，背景图片会被放大或缩小，确保元素的背景被图片完全填充。但由于图片会根据容器比例进行调整，可能会有部分被裁剪。通常用于全屏或全区域背景图的应用场景。contain：相比之下，contain则保证背景图片不会被裁剪，所有内容都显示出来。然而，它不会保证图片能完全覆盖整个背景区域，可能会有部分区域留空，适合那些需要展示整个图片的场景。
3. 指定宽度和高度
除了 auto、cover 和 contain 之外，还可以直接为 background-size 指定具体的尺寸，既可以是绝对值如 px，也可以是相对值如百分比。
.example-custom {
background-image: url('image.jpg');
background-size: 100px 200px;
}
在这个例子中，背景图片被缩放到宽度 100px、高度 200px。使用固定尺寸时，确保图片比例不会失真是一个设计难点。
4. 动态尺寸计算
在某些复杂布局中，可能需要根据元素或屏幕的大小动态调整背景图片的尺寸，calc() 函数能够很好地解决这个问题：
.example-calc {
background-image: url('image.jpg');
background-size: calc(100% - 20px) calc(100% - 50px);
}
这里，背景图片的宽度和高度会分别减去 20px 和 50px，这种动态计算的方式非常适合响应式布局。
四、响应式设计中的应用
1. 使用 cover 实现自适应背景
在响应式设计中，背景图片的尺寸必须随屏幕的变化而自动调整，而 cover 是实现这一效果的常用方法。无论屏幕尺寸如何变化，背景图片总是能够全屏覆盖，而不会失去主要内容。
.example-responsive {
background-image: url('responsive-bg.jpg');
background-size: cover;
}
这种方式常用于设计全屏展示图片的场景，特别是在着重视觉效果的网站中。
2. 使用 contain 保证图片完整显示
当你希望背景图片完整显示在不同设备上时，contain 是更好的选择。它不会裁剪图片，而是根据屏幕尺寸进行缩放，以保证图片内容的完整性。
.example-responsive-contain {
background-image: url('responsive-bg.jpg');
background-size: contain;
}
这在展示品牌标志或产品图片时非常有用，因为裁剪可能会影响图片内容的呈现效果。
五、多个背景图片的使用
CSS 支持为一个元素设置多个背景图片，每个背景图片都可以单独设置 background-size。例如：
.example-multiple {
background-image: url('image1.jpg'), url('image2.jpg');
background-size: 50% 50%, auto;
}
在这个例子中，第一张图片被设置为元素的一半大小，而第二张图片保持原始尺寸。
六、background-size 与其他属性的配合
1. 与 background-position 的配合
通过 background-position，你可以精确控制背景图片在元素中的位置。当与 background-size 结合使用时，能够创建出精美的背景效果。
.example-position {
background-image: url('image.jpg');
background-size: cover;
background-position: center center;
}
这种组合常用于大尺寸图片的全屏背景展示，通过居中对齐确保图片的主体部分始终可见。
2. 与 background-repeat 的配合
background-size 还可以与 background-repeat 配合使用，控制图片是否重复显示：
.example-repeat {
background-image: url('image.jpg');
background-size: 100px 100px;
background-repeat: repeat-x;
}
这里，背景图片会在水平方向重复，而不会垂直重复。
七、注意事项
1. 图片比例的影响
当使用 background-size 设置背景图片的大小时，确保图片的宽高比例不会被破坏。如果图片的宽度和高度不成比例，可能会导致图片拉伸或压缩。
2. 性能影响
使用过大的图片会影响页面加载性能，尤其是在使用 cover 时。为保证页面性能，应根据具体需求选择合适的图片尺寸。
八、总结
background-size 属性为开发者提供了强大的背景图像控制能力。在实际开发中，灵活使用该属性能够极大地提升页面的视觉效果和用户体验。通过合理的设置背景图片的大小，开发者可以确保图片在各种屏幕设备上都能够以最佳状态呈现，从而创造出更加精致的用户界面。
推荐：
- JavaScript
- react
- vue
