您现在的位置是：首页 > 博客网站制作 > CSS3|Html5CSS3|Html5
css3背景(七)—background-size
杨青2013-08-02【CSS3|Html5】人已围观
简介background-size检索或设置对象的背景图像的尺寸大小。background-size在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
background-size
说明：background-size检索或设置对象的背景图像的尺寸大小。background-size在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
background-size语法：
background-size：<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
默认值：auto
1）<length> | <percentage> 分别用长度值和百分比来指定图片的大小。不允许负值
2）auto 背景图像的真实大小。
3） cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
4）contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
提示：该属性提供2个参数值(特性值cover和contain除外)。如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
兼容性：除IE9以下的版本都不支持该属性。Firefox4.0、Safari5.1、Chrome13.0、Opera11.50、IE9.0等及以上的版本都很好的支持了background-size属性
示例：
div{
background:url(bg.gif);
background-size:60px 100px;
-moz-background-size:60px 100px; /* 老版本的 Firefox ,请自行添加各个浏览器前缀 */
background-repeat:no-repeat;
}
cover 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
上例css代码片段：
p{
border:5px dashed #666;width:100px;height:150px;padding:20px;
background:url(/d/file/newshtml5/css/2013-08-02/998bcd4b292157e26c04e87825d75b9a.png) no-repeat; /* background-repeat和background-images的缩写*/
background-size:cover;
}
contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。 background-size:contain
自定义背景图像大小 background-size:100px 140px;
如果从前面的css3背景（一）开始你已经看到这篇，那css3背景的属性就基本上完了。要熟悉运用这些属性，还得不断的练习，记忆。下面总结一下，background的复合属性。
语法：
background：[ background-image ] || [ background-repeat ] || [ background-attachment ] || [ background-position ]
相关属性：[ background-origin ] || [ background-clip ] || [ background-size ]
取值顺便再复习一次：
[ background-image ]： 指定对象的背景图像。可以是真实图片路径或使用渐变创建的“背景图像”
[ background-repeat ]： 指定对象的背景图像如何铺排填充。
[ background-attachment ]： 指定对象的背景图像是随对象内容滚动还是固定的。
[ background-position ]： 指定对象的背景图像位置。
[ background-origin ]： 指定对象的背景图像显示的原点。
[ background-clip ]： 指定对象的背景图像向外裁剪的区域。
[ background-size ]： 指定对象的背景图像的尺寸大小。
示例：假设要在同一个元素上定义3个背景图像
缩写方式：
background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
拆分方式：
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat,no-repeat,no-repeat;
background-attachment:scroll,scroll,scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
如果定义了多个背景图片，而其他属性只有一个参数值，则表明所有背景图片的该属性都应用同一个参数值。据此可以对上面的例子进行缩写：
缩写方式：
background:url(test1.jpg) no-repeat scroll 10px 20px,url(test2.jpg) no-repeat scroll 50px 60px,url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;
拆分方式：
background-image:url(test1.jpg),url(test2.jpg),url(test3.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-repeat:10px 20px,50px 60px,90px 100px;
background-origin:content-box;
background-clip:padding-box;
background-size:50px 60px;
Tags：css3 css3背景 background-size
很赞哦！ ()
相关文章
随机图文
用js+css3来写一个手机栏目导航
有些站长说想做一个手机适应的网站,但是导航太难了,如果要使用框架的话,代码非常多,冗余.再用dreamwear打开,那直接就不响应了.我一直都喜欢用简单的代码来实现,js,css3利用的好,同样可以做出好看实用的导航,关键是代码极少.现在我把步骤分享出来
2013年五大主流浏览器 HTML5 和 CSS3 兼容性大比拼
转眼又已过去了一年，在这一年里，Firefox 和 Chrome 在拼升级，版本号不断飙升；IE10 随着 Windows 8 在去年10月底正式发布，在 JavaScript 性能和对 HTML5 和 CSS3 的支持方面让人眼前一亮.
学习用css3画博客网站logo图标
花了几个小时的时间来研究怎么用css3来画logo，就是G有点儿问题，也算是有进步了，代码贴出来：relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */
网页前端设计快速入门技巧
一千个人眼中就有一千个哈姆雷特，每个人对网页前端的理解也是不一样的。我认为网页前端开发就像是互联网的美容师，不仅给访客带来视觉上的美感，而且随着互联网的发展，html5，css3的应用，前端工程师结合技术与艺术能把网站最好的界面呈现给用户，这就是网页前端！
