background-size
语法:
background-size:<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
取值:
auto 背景图像的真实大小,默认值
<length> 用长度值指定背景图像大小
<percentage> 用百分比指定背景图像大小
cover 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内
说明:
如果取值为2个,则第一个定义宽度,第二个定义高度,如果只提供一个,则只定义宽度,高度为auto。
兼容性:(来自http://css.doyoe.com/)
一些代码:
css
div {
width: 200px;
height: 160px;
border: 5px dashed #ccc;
background: url(demo.png) no-repeat;
float: left;
margin: 10px;
text-align: center;
line-height: 160px;
font-size: 20px;
}
.cover {
background-size: cover;
}
.contain {
background-size: contain;
}
.percentage {
background-size: 80% 50%;
}
.length {
background-size: 50px 150px;
}
.auto_height {
background-size: 100px auto;
}
html
<div>auto</div>
<div class="cover">cover</div>
<div class="contain">contain</div>
<div class="percentage">percentage</div>
<div class="length">length</div>
<div class="auto_height">auto_height</div>
效果:
background-origin
语法:
background-origin:<box> [ , <box> ]*
<box> = border-box | padding-box | content-box
取值:
padding-box 默认值,从padding区域(含padding)开始显示背景图像
border-box 从border区域(含border)开始显示背景图像
content-box 从content区域开始显示背景图像
说明:
该属性计算背景图像background-position的参考原点(位置)
兼容性:(来自http://css.doyoe.com/)
一些代码:
css
div {
width: 200px;
height: 160px;
padding: 20px;
border: 15px dashed #ccc;
background:green url(demo.png) no-repeat;
float: left;
margin: 10px;
text-align: center;
line-height: 160px;
font-size: 20px;
}
.padding_box {
background-origin: padding-box;
}
.border_box {
background-origin: border-box;
}
.content_box {
background-origin: content-box;
}
html
<div class="padding_box">padding-box</div>
<div class="border_box">border-box</div>
<div class="content_box">content-box</div>
效果:
background-clip
语法:
background-clip:<box> [ , <box> ]*
<box> = border-box | padding-box | content-box | text
取值:
border-box 默认值,从border区域(不含border)开始向外裁剪背景
padding-box 从padding区域(不含padding)开始向外裁剪背景
content-box 从content区域开始向外裁剪背景
说明:
指定对象的背景向外裁剪的区域
兼容性:(来自http://css.doyoe.com/)
一些代码:
css
div {
width: 200px;
height: 160px;
padding: 20px;
border: 15px dashed #ccc;
background:green url(demo.png) no-repeat;
float: left;
margin: 10px;
text-align: center;
line-height: 160px;
font-size: 20px;
}
.border_box {
background-clip: border-box;
}
.padding_box {
background-clip: padding-box;
}
.content_box {
background-clip: content-box;
}
html
<div class="border_box">border-box</div>
<div class="padding_box">padding-box</div>
<div class="content_box">content-box</div>
效果:
注释:CSS3中,允许多背景图像,以上三个background属性均支持对多背景图像定义。