《
CSS3基础教程：详解background-size》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023321R013.htm
Tag：CSS3基础教程 background-size CSS3基本教程 background-size
div{
background-image:url(test,CSS3基础教程：box-shadow属性.png);
,css3圆角IE的兼容方法; background-repeat:no-repeat;
background-size:contain;
}
一起来意识认识background-size吧。
2.设置背景图大小与平铺
background-size的特定值：
现在background-size让你既可以直接缩放背景图来填充斥这个区域,CSS3和jQuery动态时钟制作过程，也可以让你先给背景图设置大小，而后以设置好的尺寸去平铺满这个区域。
contain值：
上例，背景图将缩放到宽度或高度的任意一边与div区域适应。查看详细DEMO: background-size:contain。
div{
background-image:url(test,css3制作网页实例 点击切换不同的CSS列表.png);
background-repeat:no-repeat;
background-size:100px auto;
}
CSS3基础教程,CSS3入门教程：target伪类简介，本节详解应用background-size可以把持背景图的尺寸。
background-size简略的利用示例：
background-size须要1个或2个值，这些值既可以是像素px，也可以是百分比%或auto，还可以是特定值cover,CSS3入门教程(9)：RGBA声明, contain。
上例，背景图片将笼罩全部div区域。查看详细DEMO: background-size:cover。
1.背景图自适应容器大小
background-size的值定义：
div{
background-image:url(test.png);
background-repeat:no-repeat;
,CSS3入门教程(8)：关于透明度; background-size:cover;
}
background-size能够设置2个值,CSS3入门教程(7)：嵌入字体，1个为必填，1个为可选。
其中第1个值用于指定背景图的width，第2个值用于指定背景图的height，假如只给background-size设置1个值，则第2个值默以为auto（cover跟contain特定值除外）。
--> [
网站建设之]CSS3基础教程：详解background-size
cover: 坚持图像自身的宽高比例，将图片缩放到正好完整覆盖定义背景的区域； contain: 保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域；
cover值：
等价于：
background-size的值类型：
background-size是CSS3供给的一个新特征，它可以让你为所欲为的节制背景图的尺寸大小。先扼要的看看background-size的用法。咱们晓得在CSS2中，背景图的大小在款式中是不可控的，比方要想使得背景图填布满某个区域，你要么从新做张大点的图,CSS3入门教程(6)：多列 多卷，要么就只能让它以平铺的方法来填充,CSS3入门教程(5)：背景图片(背景大小和多背景图)。
div{
background-image:url(test.png);
background-repeat:no-repeat;
background-size:100px;
}
查看具体DEMO: background-size的值定义。当你使用firebug抓取到那个实例节点时，你会发明第二个值被主动加上了并且值为auto。当然，你也可以手动将第2个值设置为auto，然后与该DEMO的实例对照，它们的后果将是雷同的。
(责任编辑：网站建设)
CSS3基础教程：详解background-size相关文章