首頁 > 文章 > web前端 > 解決background-size IE8相容方案實例

解決background-size IE8相容方案實例

高洛峰原創: 2017-03-21 14:58:143533瀏覽

根據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>

效果：

（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;);
            }

IE8瀏覽器效果：

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

原則：

filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled：可選項。布林值(Boolean)。設定或檢索濾鏡是否已啟動。 true：預設值。濾鏡啟動。 false：濾鏡被禁止。

sizingMethod：可選項。字串(String)。設定或擷取濾鏡作用的物件的圖片在物件容器邊界內的顯示方式。 crop：剪切圖片以適應物件尺寸。 image：預設值。增大或減少物件的尺寸邊界以適應圖片的尺寸。 scale：縮放圖片以適應物件的尺寸邊界。

src：必選項。字串(String)。使用絕對或相對 url 位址指定背景圖像。如果忽略此參數，濾鏡將不會作用。

以上是解決background-size IE8相容方案實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css設定捲軸樣式步驟圖解下一篇：css設定捲軸樣式步驟圖解

看更多