导航分类

机器学习教程

CSS background-repeat 属性 CSS block-size 属性

CSS background-size 属性

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

定义和用法

background-size是 CSS 中用于控制背景图像尺寸的属性，它决定了背景图片在元素中的显示大小。

background-size当使用cover或contain时，图像会保持原始宽高比。

默认值：	auto
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.backgroundSize="60px 120px"

常用的实例

接下来通过多个实例演示background-size属性的用法，来深化您对background-size属性的理解。

1. 完全覆盖背景区域

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/forest.png');
    background-size: cover;
}

2. 完全装入背景区域

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/forest.png');
    background-size: contain;
}

3. 固定尺寸

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/forest.png');
    background-size: 200px 150px;
}

4. 响应式背景

实例代码运行代码

复制

.example {
    background-image:url('/uploads/20250507/forest.png');
    background-size: 100% auto; /* 宽度100%，高度自动 */
}

CSS 语法

background-size: auto|length|cover|contain|initial|inherit;

属性值

值	描述
`auto`	默认值，背景图像以原始大小显示。
`length`	设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则将第二个值设置为“自动”。参阅长度单位。
`percentage`	以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则将第二个值设置为“自动”。
`cover`	调整背景图像的大小以覆盖整个容器，即使它必须拉伸图像或稍微切掉一条边缘。
`contain`	调整背景图像的大小，以确保图像完全可见。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。

浏览器支持

表中的数字指定了完全支持background-size属性的第一个浏览器版本。


Chrome	IE / Edge	Firefox	Safari	Opera
4.0	9.0	4.0	4.1	10

CSS background-size 属性

定义和用法

常用的实例

1. 完全覆盖背景区域

2. 完全装入背景区域

3. 固定尺寸

4. 响应式背景

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

CSS background-size 属性

定义和用法

常用的实例

1. 完全覆盖背景区域

2. 完全装入背景区域

3. 固定尺寸

4. 响应式背景

CSS 语法

属性值

浏览器支持

相关页面

CSS 参考手册

CSS 属性

意见反馈

反馈提交成功