CSS3系列教程——Background-size
十月 9, 2010
4 comments
本文翻译自CSS3.info,并稍加改动,原文地址:Background-size。
CSS3提供了一个属性使你可以定义背景图片的大小——background-size。
你可以用像数或百分比来定义元素的长和宽。但是注意当你用百分比指定一个元素的大小的时候,你需要用到background-orgin。
目前除IE外,background-size支持其它大部分主流浏览器。当然,他们需要加上各自的前缀:
Firefox:-moz-background-size;
Webkit内核(Chrome和Safari):-webkit-background-size;
Opera:-o-background-size;
Konqueror:-khtml-ground-size。
例:
背景图片的长和宽分别为200px和50px。
所以你看到的背景图片应该非常小,并显示在这个元素的左上角。
代码如下:
p{
background:url(http://jayuh.com/wp-content/uploads/2010/10/background1.jpg) no-repeat scroll 0% 0% transparent;
padding:60px 5px 5px; border:1px solid rgb(153,0,0);
color:rgb(131,209,62);
-moz-background-size:200px 50px;
-webkit-background-size:200px 50px;
-o-background-size:200px 50px;
-khtml-background-size:200px 50px;
}