Background-Size:[ <length> | <percentage> | auto ]{1,2} | cover | contain
background-size指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。
background-size可以设置2个值,1个为必填,1个为可选。第1个值用于指定背景图的width,第2个值用于指定背景图的height。
如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。
<length>:设置背景图片的高度和宽度(单位:px)。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为“auto”,
例如:background-size: 100px 200px;背景宽100px,高200px;
<percentage>:设置背景图片的高度和宽度(单位:%)。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为“auto”
例如:background-size: 100% 100%;背景充满
cover: 缩放图像的最小值,其宽度和高度都能放入内容区域
contain:缩放图像的最大值,其宽度和高度都能放入内容区域
效果如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
<
style
type="text/css">
.test
{
border: 20px dotted red;
height: 200px;
width: 200px;
margin: 16px;
background: url("/Content/014.png");
background-origin: padding-box;
background-repeat: no-repeat;
text-align: center;
float: left;
}
div p
{
padding: 46px 10px;
}
#div1
{
background-size: 60px 60px;
}
#div2
{
background-size: 100% 50%;
}
#div3
{
background-size: cover;
}
#div4
{
background-size: contain;
}
</
style
>
<
div
id="div1" class="test">
<
p
>
background-size: 60px 60px</
p
>
</
div
>
<
div
id="div2" class="test">
<
p
>
background-size: 100% 50%;
</
p
>
</
div
>
<
div
id="div3" class="test">
<
p
>
background-size: cover; 缩放图像的最小值,其宽度和高度都能放入内容区域
</
p
>
</
div
>
<
div
id="div4" class="test">
<
p
>
background-size: contain; 缩放图像的最大值,其宽度和高度都能放入内容区域
</
p
>
</
div
>
|
作者:绿茶叶
出处:http://www.cnblogs.com/greenteaone/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
转载:http://www.cnblogs.com/greenteaone/archive/2012/08/28/2659878.html