美文网首页
关于IE8以下不支持background-size的兼容方案

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

作者: JasonQiao | 来源:发表于2016-08-11 10:34 被阅读3086次

    在指定背景图像适应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>
    

    相关文章

      网友评论

          本文标题:关于IE8以下不支持background-size的兼容方案

          本文链接:https://www.haomeiwen.com/subject/ygajsttx.html