30. background-size 有哪些属性
总结
- cover | contain | 百分比 | 长宽 | auto
一、作用说明
background-size
是 CSS 中用于控制背景图片尺寸的属性,可以灵活设置背景图的宽高,以适应不同的容器大小。
二、语法
background-size: auto | length | percentage | cover | contain;
三、可选值说明
值 | 描述 | 示例 |
---|---|---|
auto | 默认值,保持图片原始尺寸 | background-size: auto; |
length | 指定具体的宽高(如 px、em) | background-size: 200px 100px; |
percentage | 百分比,相对于容器的宽高 | background-size: 50% 50%; |
cover | 等比例缩放图片,完全覆盖容器,可能裁剪图片 | background-size: cover; |
contain | 等比例缩放图片,完整显示在容器内,可能留白 | background-size: contain; |
四、详细说明
1. auto
- 默认值,背景图保持原始大小。
- 若只设置一个值(如
background-size: 200px
),第二个值自动为auto
,保持图片比例。
2. length
- 使用固定值设置背景图大小。
- 可设置一个或两个值,分别表示宽和高:
background-size: 100px; /* 宽 100px,高 auto */
background-size: 200px 100px; /* 宽 200px,高 100px */
3. percentage
- 百分比基于容器的宽度和高度。
- 若容器宽高为
300px x 200px
,设置background-size: 50% 50%
,则背景图会显示为150px x 100px
。
background-size: 100% 100%; /* 背景图拉伸填满整个容器,可能变形 */
4. cover
- 等比例缩放背景图,确保图片完全覆盖容器。
- 若图片比例与容器不一致,图片可能会被裁剪。
background-size: cover;
✅ 常用于全屏背景图、轮播图等场景。
5. contain
- 等比例缩放背景图,确保图片完整显示在容器内。
- 若容器比例与图片不一致,容器可能会留白。
background-size: contain;
✅ 常用于图标、LOGO 等需要完整展示的场景。
四、示例代码
HTML:
<div class="box"></div>
CSS:
.box {width: 300px;height: 200px;background-image: url("image.jpg");background-repeat: no-repeat;background-position: center;border: 1px solid #ccc;
}
不同 background-size
效果:
/* 默认 auto */
background-size: auto;/* 固定大小 */
background-size: 200px 150px;/* 百分比 */
background-size: 50% 50%;/* 完全覆盖 */
background-size: cover;/* 完整显示 */
background-size: contain;
五、应用场景
场景 | 推荐值 |
---|---|
全屏背景图 | cover |
图标展示 | contain |
自定义背景大小 | length |
响应式背景图 | cover 或 contain |
背景图拉伸填充 | 100% 100% (注意变形) |
六、注意事项
注意点 | 说明 |
---|---|
cover 和 contain 都是等比缩放 | 不会破坏图片比例 |
使用 100% 100% 可能导致图片变形 | 若容器与图片比例不一致 |
不影响布局 | background-size 不会影响元素本身的宽高 |
可用于响应式设计 | 配合媒体查询使用,适配不同设备 |