前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

Background-size完美兼容IE

css3
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