Background-size完美兼容IE

CSS3 新增的 background-size 是一个很有用的属性，用于定义背景图片的尺寸，有了这个属性，你就可以任意指定背景图片的大小。其中最常用的值应该要数 cover 了，该值能让背景图片缩放至填满整个容器，即使是图片面积小于容器面积。

由于 background-size 是 CSS3 新增的属性，所以 IE 低版本自然就不支持了，但是老外写了一个 htc 文件，名叫 background-size polyfill，使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中，并重新计算宽度、高度、left、top 等值，模拟 background-size 的效果。

以下是网上解决IE8的兼容方案:

>>filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale');
-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/logo.gif',sizingMethod='scale')";

但问题是只能background-size:100%，不能直接指定任意大小background-size

js插件完美兼容IE6-IE8: background_size_emu.JS

DEMO在线演示

用法：

在元素标签上写行内样式，一个背景图片，一个是background-size.即可实现想要的效果


 

转载请注明：前端录»Background-size完美兼容IE

<script src="http://www.wozhuye.com/index.php?m=digg&c=index&a=init&id=16-323-2"></script>