作用：都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同之处在于：
1. 在no-repeat情况下，如果容器宽高比与图片宽高比不同，

　　cover（遮盖）：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

　　contain（包含）:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域；

2. 在repeat情况下：

cover:与上述相同；

contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

background-size 在ie7\8的兼容写法：用filter滤镜

至于ie6?我至今不知道ie6咋个整。如果你知道，请务必告诉我~

css中加入一句：

 filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');

sizingMethod：“scale|crop|image” 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。crop：剪切图片以适应对象尺寸。
image：默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
scale：缩放图片以适应对象的尺寸边界。

PS:注意：如果设置了background-attachment:fixed;会是background-size属性失效

原文地址：https://www.cnblogs.com/hamsterPP/p/5205976.html

background-size：contain 与cover的区别（转载）相关推荐

CSS background-size contain 与cover的区别
最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
.NET 的 WCF 和 WebService 有什么区别?(转载)
.NET 的 WCF 和 WebService 有什么区别?(转载) [0]问题: WCF与 Web Service的区别是什么? 和ASP.NET Web Service有什么关系? WCF与ASP ...
postfix中recipient/client/sender/helo四者的区别转载
postfix在main.cf中用下面四个做限制,那么这四者到底有什么区别? smtpd_recipient_restrictions smtpd_client_restrictions smtpd_ ...
strlen、sizeof与size()求字符串长度的区别
strlen.sizeof与size()求字符串长度的区别 cout<<strlen("123")<<endl; //返回 3 cout<<si ...
css中contain和cover的区别（转载）
不同之处在于: 1. 在no-repeat情况下,如果容器宽高比与图片宽高比不同, cover(遮盖):图片宽高比不变.铺满整个容器的宽高,而图片多出的部分则会被截掉: contain(包含):图片宽 ...
jquery和javascript的区别(转载自脚本之家)
jquery 就对javascript的一个扩展,封装,就是让javascript更好用,更简单,为了说明区别,下面与大家分享下JavaScript 与JQuery 常用方法比较 jquery 就对j ...
arm920T与arm926的区别[转载]
ARM920(T)与ARM926(EJ-S)还是有不少区别的,粗的讲,前者基于ARMv4架构,后者基于ARM v5架构.其中,对于程序员来说,一个大的区别是,两者指令集不一样.926(ARM v5)新 ...
php中this,self,parent三个关键字之间的区别(转载)
PHP5是一具备了大部分面向对象语言的特性的语言,比PHP4有了很多的面向对象的特性,但是有部分概念也比较难以理解,这里我主要谈的是 this,self,parent三个关键字之间的区别.从字面上比 ...

background-size：contain 与cover的区别（转载）

background-size 在ie7\8的兼容写法：用filter滤镜

原文地址：https://www.cnblogs.com/hamsterPP/p/5205976.html

background-size：contain 与cover的区别（转载）相关推荐

最新文章

热门文章