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

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

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

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