background-size: length|percentage|cover|contain;
IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 属性。
CSS3 新增的 background-size 是一个很有用的属性,用于定义背景图片的尺寸,有了这个属性,你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了,该值能让背景图片缩放至填满整个容器,即使是图片面积小于容器面积。
由于 background-size 是 CSS3 新增的属性,所以 IE 低版本自然就不支持了。
话不多说直接上图:
原图是一张330 * 250大小的图片如下:
放一个简单的布局,让child设置这张图为背景图,并给出background-size属性:
<!DOCTYPE html>
<html lang="utf-8">
<head>
<meta charset="UTF-8">
<title>IE 8 下兼容background-size</title>
<style>
.parent {
width: 400px;
height: 320px;
border: 1px solid #000;
}
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
看下IE 8下效果:
很明显,background-size: cover 这个属性并没有生效。
有一种解决方式是利用IE 提供的CSS渲染来处理:
AlphaImageLoader:在元素的背景和内容之间插入一张图片,并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
语法格式:filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=Enabled , sizingMethod=Size , src=URL )
enabled:可选项,布尔值(Boolean)。设置或检索滤镜是否激活。
1)true:默认值。滤镜激活。 2)false:滤镜被禁止。
sizingMethod:可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
1)crop:剪切图片以适应对象尺寸。
2)image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。
3)scale:缩放图片以适应对象的尺寸边界。
src:必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数,滤镜将不会作用。*
将之前的样式修改一下:
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 此处加上-ms前缀,让IE识别 */
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale');
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/item-img.png',sizingMethod='scale');
/* \9 是 IE的CSS hack,IE9以下识别,不包括IE 9 */
background: none\9;
}
看下效果如何:
OK,貌似很不错,但是,有个问题就是IE 9下,如果图片是带透明的,会出现两个图片堆叠的状况,所以针对IE8 可以这么写,IE 8 +的话就要另寻他路了。
另外一种是老外发明的,老外写了一个 htc 文件,名叫 background-size polyfill,使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。
修改一下child的样式:
.child {
width: 200px;
height: 150px;
border: 1px solid red;
background: url(./images/item-img.png) no-repeat;
background-size: cover;
/* 再次引入backgroundsize.min.htc,filter的那段删除 */
-ms-behavior: url(./backgroundsize.min.htc);
behavior: url(./backgroundsize.min.htc);
}
注意,[backgroundsize.min.htc](https://github.com/louisremi/background-size-polyfill/blob/gh-pages/backgroundsize.min.htc) 需要引进来,改好样式来看下效果:
可以看到,图片已经填充了整个child,并且dom结构也变化了,这是.htc文件自动创建的,IE 8+都兼容。
有兴趣深究的童鞋可以看下官方非压缩的源码,原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。
backgroundsize.min.htc
作者:Mr慢悠悠
链接:https://www.jianshu.com/p/05e559784bc5
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。