background-size：contain和cover的区别，以及ie78的兼容写法
时间：2023-03-31 12:51:40
CSS
一：background-size：contain和cover的区别：功能：都缩放相同纵横比的图片以适应宽高整个容器的。不同之处在于：1.在不重复的情况下，如果容器的纵横比与图片不一样， cover：图片的纵横比不变，宽高整个container都被覆盖了，而image有更多的 contain：image本身的纵横比不变，缩放时可以完全显示image本身，所以container会有空白区域；PS：其实，从英文的意思看：cover是“遮罩、遮盖”的意思---这里理解“stuffed”比较合适，contain是“包含”的意思——就是：虽然我的图片被放大了，但是整个图片被“包容”在你的里面，你必须把我完整地展现出来，根本不能裁剪我~2。在repeat的情况下：cover：同上；contain：容器内至少有一张完整的图片，背景图片平铺在容器的空白区域。剪掉那些不合适的。示例：先上传原图：宽高600*1069代码：
无重复：css代码覆盖版：.img-block{width:200px;高度：200px；边框：2px纯黑色；背景：url(../img/justice.jpg)不重复；背景尺寸：封面；}效果图：可以看出cover的效果是：图片按年缩放，填满整个容器，图片多余的部分被剪掉；无重复：包含版本的css代码：.img-block{width:200px;高度：200px；边框：2px纯黑色；背景：url(../img/justice.jpg)不重复；背景大小：包含；}效果图：可以看到：containversion:图片是逐年缩放的，直到图片可以完全显示在容器中，所以容器有一个空白区域。所以，这就涉及到我一开始提到的background-repeat。如果情况改为background-repeat:repeat,（其他代码不变），那么这里的空白区域会平铺另一张背景图，一定不够，那么第二张背景图会被Truncated；效果如下：CSS代码background-repeat:repeatbackground-size:containversion.img-block{width:200px;高度：200px；边框：2px纯黑色；背景：url(../img/justice.jpg);背景大小：包含；二：background-size兼容ie78：在filtercss中加一句：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/justice.jpg',sizingMethod='scale');参数说明：src="图片路径"，可以是相对的也可以是绝对的；sizingMethod:"scale|crop|image"是可选的。字符串（字符串）。设置或检索受过滤器影响的对象的图像如何在对象容器的边界内显示。 裁剪：裁剪图像以适合对象大小。 图像：默认值。增加或减少对象的大小范围以适应图片的大小。 scale：缩放图像以适应对象的大小范围。PS：注意：如果background-attachment:fixed;设置后，background-size属性将无效
