关于IE8以下不支持background-size的兼容方案

2016-08-11  本文已影响3086人  JasonQiao

在指定背景图像适应DIV的宽高时,我们可以使用
background-size:100% 100%
或者
background-size:cover
来让背景铺满这个DIV。

但是在IE8以下(包括IE 8)这个CSS属性并不受支持。那如何解决呢?
IE的AlphaImageLoader滤镜可以解决这个问题,详细可参看
https://msdn.microsoft.com/zh-cn/library/ms532969(v=vs.85).aspx

此处针对其用法做简单说明

HTML用法:
<ELEMENT STYLE="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)" ... >

JS用法:
object .[style](https://msdn.microsoft.com/zh-cn/library/ms528442(v=vs.85).aspx).filter ="progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)"

其中sProperties可以包含enabled、sizingMethod和src三个属性。

  1. enabled:布尔型,true或false,指明滤镜是否启用
  2. sizingMethod:指明图像适应容器方法,可以使crop(裁剪图像适应容器)、image(容器适应图像本身大小)和scale(缩放图像适应容器)
  3. src:要加载的图像路径,必须是相对于该页面的,所以如果在CSS中指定必须使用绝对路径,不能使用相对于CSS文件的相对路径,可能会出错。

例子:

<SCRIPT>
var bToggle = 1

<!-- Toggle the sizingMethod property to resize the image.  -->
function fnToggle(oObj) {
    if (bToggle) {                                                        
        bToggle = 0;
        oDiv.filters(0).sizingMethod="image";
        oObj.innerText='Enlarge It';}
    else {
        bToggle = 1;
        oDiv.filters(0).sizingMethod="scale";
        oObj.innerText='Make Normal';}
}
</SCRIPT>
        
<!-- This DIV is the target container for the image.  -->        
    <DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;         
        filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >
        </DIV>

<BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>
上一篇 下一篇

猜你喜欢

热点阅读