【CSS】background-size 属性详解

【CSS】background-size 属性详解
原创【CSS】background-size 属性详解-CSDN博客
于 2024-09-23 11:30:52 发布
·
1.8w 阅读
·

32
·
33
·
CC 4.0 BY-SA版权
文章标签：
#css
#前端
#node.js
#javascript
#vscode

CSS
专栏收录该内容
16 篇文章
订阅专栏
文章目录
一、`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;
}
AI生成项目
css
1
2
3
4
在这个例子中，背景图片的大小保持其原始尺寸，图片既不会缩放也不会拉伸，直接根据图片的实际大小显示。

2. 使用 cover 完全覆盖背景
.example-cover {
background-image: url('image.jpg');
background-size: cover;
}
AI生成项目
css
1
2
3
4
cover 值会将背景图片缩放到足够大，以确保它能够覆盖整个元素背景。如果背景图片的比例与元素不同，部分图片可能会被裁剪。

3. 使用 contain 适应背景
.example-contain {
background-image: url('image.jpg');
background-size: contain;
}
AI生成项目
css
1
2
3
4
与 cover 不同，contain 值会确保整个背景图片都显示在元素背景中，图片不会被裁剪，但这可能导致元素中留有空白区域。

4. 使用百分比或具体尺寸
.example-size {
background-image: url('image.jpg');
background-size: 50% 50%;
}
AI生成项目
css
1
2
3
4
这里，背景图片的宽度和高度分别设定为元素尺寸的 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;
}
AI生成项目
css
1
2
3
4
在这个例子中，背景图片被缩放到宽度 100px、高度 200px。使用固定尺寸时，确保图片比例不会失真是一个设计难点。

4. 动态尺寸计算
在某些复杂布局中，可能需要根据元素或屏幕的大小动态调整背景图片的尺寸，calc() 函数能够很好地解决这个问题：

.example-calc {
background-image: url('image.jpg');
background-size: calc(100% - 20px) calc(100% - 50px);
}
AI生成项目
css
1
2
3
4
这里，背景图片的宽度和高度会分别减去 20px 和 50px，这种动态计算的方式非常适合响应式布局。

四、响应式设计中的应用
1. 使用 cover 实现自适应背景
在响应式设计中，背景图片的尺寸必须随屏幕的变化而自动调整，而 cover 是实现这一效果的常用方法。无论屏幕尺寸如何变化，背景图片总是能够全屏覆盖，而不会失去主要内容。

.example-responsive {
background-image: url('responsive-bg.jpg');
background-size: cover;
}
AI生成项目
css
1
2
3
4
这种方式常用于设计全屏展示图片的场景，特别是在着重视觉效果的网站中。

2. 使用 contain 保证图片完整显示
当你希望背景图片完整显示在不同设备上时，contain 是更好的选择。它不会裁剪图片，而是根据屏幕尺寸进行缩放，以保证图片内容的完整性。

.example-responsive-contain {
background-image: url('responsive-bg.jpg');
background-size: contain;
}
AI生成项目
css
1
2
3
4
这在展示品牌标志或产品图片时非常有用，因为裁剪可能会影响图片内容的呈现效果。

五、多个背景图片的使用
CSS 支持为一个元素设置多个背景图片，每个背景图片都可以单独设置 background-size。例如：

.example-multiple {
background-image: url('image1.jpg'), url('image2.jpg');
background-size: 50% 50%, auto;
}
AI生成项目
css
1
2
3
4
在这个例子中，第一张图片被设置为元素的一半大小，而第二张图片保持原始尺寸。

六、background-size 与其他属性的配合
1. 与 background-position 的配合
通过 background-position，你可以精确控制背景图片在元素中的位置。当与 background-size 结合使用时，能够创建出精美的背景效果。

.example-position {
background-image: url('image.jpg');
background-size: cover;
background-position: center center;
}
AI生成项目
css
1
2
3
4
5
这种组合常用于大尺寸图片的全屏背景展示，通过居中对齐确保图片的主体部分始终可见。

2. 与 background-repeat 的配合
background-size 还可以与 background-repeat 配合使用，控制图片是否重复显示：

.example-repeat {
background-image: url('image.jpg');
background-size: 100px 100px;
background-repeat: repeat-x;
}
AI生成项目
css
1
2
3
4
5
这里，背景图片会在水平方向重复，而不会垂直重复。

七、注意事项
1. 图片比例的影响
当使用 background-size 设置背景图片的大小时，确保图片的宽高比例不会被破坏。如果图片的宽度和高度不成比例，可能会导致图片拉伸或压缩。

2. 性能影响
使用过大的图片会影响页面加载性能，尤其是在使用 cover 时。为保证页面性能，应根据具体需求选择合适的图片尺寸。

八、总结
background-size 属性为开发者提供了强大的背景图像控制能力。在实际开发中，灵活使用该属性能够极大地提升页面的视觉效果和用户体验。通过合理的设置背景图片的大小，开发者可以确保图片在各种屏幕设备上都能够以最佳状态呈现，从而创造出更加精致的用户界面。
————————————————
版权声明：本文为CSDN博主「Peter-Lu」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lph159/article/details/142454250