CSS background-size 属性
示例
使用 "auto" 和像素指定背景图像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}
自己动手试一试 »
更多“自己尝试”的例子见下文。
定义和用法
background-size
属性指定背景图像的大小。
您可以使用此属性的四种不同语法:关键字语法("auto"、"cover" 和 "contain")、单值语法(设置图像宽度(高度变为 "auto"))、双值语法(第一个值:图像宽度,第二个值:高度)以及多背景语法(用逗号分隔)。
默认值 | auto |
---|---|
继承 | no |
可动画 | 是。 阅读有关可动画化的内容 尝试一下 |
版本 | CSS3 |
JavaScript 语法 | object.style.backgroundSize="60px 120px" 尝试一下 |
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
background-size | 4 | 9 | 4 | 4.1 | 10 |
CSS 语法
background-size: auto|length|cover|contain|initial|inherit;
属性值
值 | 描述 | 演示 |
---|---|---|
auto | 默认值。背景图像显示为其原始大小 | 演示 ❯ |
length | 设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只给出一个值,则第二个值设置为 "auto"。 阅读有关长度单位的信息 | 演示 ❯ |
百分比 | 以父元素的百分比设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只给出一个值,则第二个值设置为 "auto" | 演示 ❯ |
cover | 将背景图像缩放到覆盖整个容器,即使它需要拉伸图像或剪掉边缘的一部分 | 演示 ❯ |
contain | 将背景图像缩放到确保图像完全可见 | 演示 ❯ |
initial | 将此属性设置为其默认值。阅读关于initial | |
inherit | 从其父元素继承此属性。阅读关于inherit |
更多示例
示例
使用百分比指定背景图像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75% 50%;
}
自己动手试一试 »
示例
使用 "cover" 指定背景图像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
自己动手试一试 »
示例
使用 "contain" 指定背景图像的大小
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain;
}
自己动手试一试 »
示例
这里我们有两个背景图像。我们使用 "contain" 指定第一个背景图像的大小,使用 "cover" 指定第二个背景图像的大小
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size: contain, cover;
}
自己动手试一试 »
示例
使用不同的背景属性创建“英雄”图片
.hero-image {
background-image: url("photographer.jpg"); /* 使用的图片 */
background-color: #cccccc; /* 如果图片不可用时使用 */
height: 500px; /* 您必须指定高度 */
background-position: center; /* 居中图片 */
background-repeat: no-repeat; /* 不重复图片 */
background-size: cover; /* 将背景图片缩放到覆盖整个容器 */
}
自己动手试一试 »
相关页面
CSS 教程:CSS 背景
HTML DOM 参考:backgroundSize 属性