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;
}
亲自尝试 »
更多 "亲自尝试" 示例在下面。
定义和用法
The background-size 属性指定背景图片的大小。
可以使用四个不同的语法与该属性一起使用：关键字语法（“auto”、“cover” 和 “contain”）、单值语法（设置图片的宽度（高度变为“auto”）、双值语法（第一个值：图片的宽度，第二个值：高度）以及多背景语法（用逗号分隔）。
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| background-size | 4 | 9 | 4 | 4.1 | 10 |
CSS 语法
background-size: auto|length|cover|contain|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 默认值。背景图片以其原始大小显示 | 演示 ❯ |
| length | 设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则第二个值设置为“auto”。 阅读关于长度单位 | 演示 ❯ |
| percentage | 以父元素百分比的形式设置背景图片的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只给出一个值，则第二个值设置为“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" 图片
.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 属性
