background-size

background-size 属性规定背景图像的尺寸。

语法

/* <length> value */
background-size: 20px;
background-size: 2em;

/* <percentage> value */
background-size: 20%

background-size: auto;
background-size: cover;
background-size: contain;
background-size: 20% auto;
background-size: 2em 40%;
background-size: auto auto;
background-size: auto 20%;
background-size: auto, auto;
background-size: 20%, 10%; 10%;
background-size: 2px auto contain

值

值	描述
<length>	此关键词表示指定背景图片大小，不可为负值。
<percentage>	此关键词表示背景图片相对背景区的百分比。背景区由background-origin设置，默认为盒模型的内容和内边距，也可设置为只有内容区，或还包括边框。
auto	此关键词表示以背景图片的比例缩放背景图片。
cover	此关键词表示缩放背景图片完全覆盖背景区，背景图片部分不可见。
contain	此关键词表示缩放背景图片完全装入背景区，背景区部分空白。

例子

HTML

<div id="red">
</div>

CSS

#red {
     height: 200px;
     border: 2px dashed red;
     background-image: url("http://tse4.mm.bing.net/th?id=OIP.Mf677e381f4220ac2a878c923cf334aafo0&w=300&h=300&p=0&pid=1.7");
     background-position: top;
     background-size: 50%, 25%, 25%;
}

执行结果

参考

相关链接

外部链接

background-size-MDN


跳至内容顶部