CSS3中有关background
摘要： CSS3中有关background-size的表述与运用！時间:来源于:怀柔企业网站建设创作者:怀柔网页页面设计方案怀柔seo优化在HTML5+CSS3前端开发开发设计中常常采用background对网页页面情况开展响应式...
CSS3中有关background-size的表述与运用！
時间:来源于:怀柔企业网站建设创作者:怀柔网页页面设计方案怀柔seo优化
在HTML5+CSS3前端开发开发设计中常常采用background对网页页面情况开展响应式或配对或访问器适配性，便会采用background中的size叙述，立即上干货知识：
background-size: auto | 长短值 | 百分数 | cover | contain
1、auto：默认设置值，不变变情况照片的初始高宽比和总宽；
2、 长短值 ：成对出現如200px 50px，将情况照片宽高先后设定为前边2个值，当设定一个值时，将其做为照片总宽值来等比放缩；
3、 百分数 ：0％~100％中间的一切值，将情况照片宽高先后设定为所属原素宽高乘之前面百分数得到的标值，当设定一个值时跟上面一样；
4、cover：说白了为遮盖，将要情况照片等比放缩以铺满全部器皿；
5、contain：容下，将要情况照片等比放缩至某一边紧贴器皿边沿才行。
IE7，8
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src= 11.gif , sizingMethod= scale );
background-size: cover; //只适用IE9+
-webkit-background-size: cover; //webkit关键
-moz-background-size: cover; //FF关键
-o-background-size: cover; //Opera
background-size: auto | 长短值 | 百分数 | cover | contain
1、auto：默认设置值，不变变情况照片的初始高宽比和总宽；
2、 长短值 ：成对出現如200px 50px，将情况照片宽高先后设定为前边2个值，当设定一个值时，将其做为照片总宽值来等比放缩；
3、 百分数 ：0％~100％中间的一切值，将情况照片宽高先后设定为所属原素宽高乘之前面百分数得到的标值，当设定一个值时跟上面一样；
4、cover：说白了为遮盖，将要情况照片等比放缩以铺满全部器皿；
5、contain：容下，将要情况照片等比放缩至某一边紧贴器皿边沿才行。
IE7，8
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src= 11.gif , sizingMethod= scale );
background-size: cover; //只适用IE9+
-webkit-background-size: cover; //webkit关键
-moz-background-size: cover; //FF关键
-o-background-size: cover; //Opera
