CSS background-size属性指定的背景图像的大小。
下表总结了此属性的用法上下文和版本历史记录。
默认值: | auto auto |
---|---|
适用于: | 所有元素 |
继承: | 没有 |
可动画制作: | 是。请参考 动画属性。 |
版本: | CSS3的新功能 |
JavaScript 语法: | object object.style.backgroundSize="60px 80px" |
该属性的语法如下:
background-size: length | percentage | auto | cover | contain | initial | inherit
下面的示例演示了如何使用background-size属性。
.box { width: 250px; height: 150px; padding: 10px; border: 6px dashed #333; background: url("images/sky.jpg") no-repeat; background-size: contain; }测试看看‹/›
提示:该background-size属性通常用于创建全尺寸背景图像,该背景图像将根据浏览器的视口或witdh的大小进行缩放。
下表描述了此属性的值。
值 | 描述 |
---|---|
length | 将背景图像的宽度和高度设置为指定的长度。第一个值设置宽度,第二个值设置高度。如果仅指定一个值,则第二个值默认为auto。不允许负长度值。 |
percentage | 将背景图像的宽度和高度设置为背景定位区域的百分比。第一个值设置宽度,第二个值设置高度。如果仅指定一个值,则第二个值默认为auto。不允许使用负百分比值。 |
auto | 一个auto用于一个维度值缩放在相应的方向上的背景图像,使得其固有比例被维持。如果auto两个尺寸均指定了值,则背景图像将包含其自己的宽度和高度,这是默认行为。 |
cover | 在保留图像固有长宽比(如果有)的情况下,将图像缩放到最小尺寸,以使其宽度和高度都可以完全覆盖背景定位区域。 |
contain | 将图像缩放,同时保留其固有的长宽比(如果有),以最大尺寸进行缩放,以使其宽度和高度都可以适合背景定位区域。 |
initial | 将此属性设置为其默认值。 |
inherit | 如果指定,则关联元素采用其父元素background-size属性的计算值。 |
background-size属性浏览器的兼容性,所有主流浏览器均支持该属性。
|
相关属性:background,background-attachment,background-color,background-image,background-clip,background-position,background-repeat,background-origin。