解决background-size IE8兼容方案实例-tutorial css-php.cn

解决background-size IE8兼容方案实例

高洛峰

Lepaskan： 2017-03-21 14:58:14

asal

3546 orang telah melayarinya

根据canius（http://caniuse.com/#search=background-size），background-size兼容性为IE9以及以上浏览器，如下图所示。

解决background-size IE8兼容方案实例

实例代码：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>background-size 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
            }
        </style>
    </head>

    <body>
        <div>
        </div>
    </body>

</html>

Salin selepas log masuk

效果：

（1）chrome浏览器：

解决background-size IE8兼容方案实例

（2）IE8浏览器：

解决background-size IE8兼容方案实例

兼容性方案：

使用filter属性：

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
                /*下一行为关键设置*/
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=&#39;img/aaa.jpg&#39;,  sizingMethod=&#39;scale&#39;);
            }

Salin selepas log masuk

IE8浏览器效果：

解决background-size IE8兼容方案实例