相关内容：
CSS3 background-size 属性
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
background-size： [ ,
&bg-size& =
| auto ]{1,2} | cover | contain
默认值：auto
用长度值指定背景图像大小。不允许负值。
用百分比指定背景图像大小。不允许负值。
背景图像的真实大小。
将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
检索或设置对象的背景图像的尺寸大小。
该属性提供2个参数值(特性值cover和contain除外)。
如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。
对应的脚本特性为backgroundSize。
浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
background-size_CSS参考手册_web前端开发参考手册系列
background-size
将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
自定义背景图像大小CSS 参考手册
CSS3 background-size 属性
指定背景图像的大小：
background:url(img_flwr.gif);
background-size:80px 60
background-repeat:no-
在此页底部有更多的例子。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
background-size&
4.01.0&-webkit-
4.03.6&-moz-
4.13.0&-webkit-
10.510.0&-o-
标签定义及使用说明
background-size属性指定背景图片大小。
JavaScript 语法:
object object.style.backgroundSize="60px 80px"
background-size: length|percentage|cover|
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"
percentage
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
拉伸背景图像完全覆盖内容面积。
拉伸4个横向背景图片。
CSS3 教程:温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
我相信没有什么事自己做不到的,只要自己想去做它,即使做不到只要自己尽力就可以了.世上无难事,只怕有心人.
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(816)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'css3的一个控制背景的属性，background-size可以缩放大小啦',
blogAbstract:'background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图的width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。cover：保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'我相信没有什么事自己做不到的,只要自己想去做它,即使做不到只要自己尽力就可以了.世上无难事,只怕有心人.',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}css background-size 属性
background-size 属性规定背景图像的尺寸。
background-size: length|percentage|cover|
length 设置背景图像的高度和宽度。
第一个值设置宽度，第二个值设置高度。
如果只设置一个值，则第二个值会被设置为 &auto&。
percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 &auto&。
cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
默认值： auto
继承性： no
版本： CSS3
JavaScript 语法： object.style.backgroundSize=&60px 80px&
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
&!DOCTYPE html&
background:url(/i/bg_flower.gif);
background-size:35% 100%;
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&p&这是一个段落。&/p&
&!DOCTYPE html&
background:url(/i/bg_flower.gif);
background-size:25%;
border:2px solid #92b901;
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
&p&这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。&/p&
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。