background-size IE8兼容方案

時間 2019-11-12

原文原文鏈接

2017.7.5更新：css

在處理IE8兼容性問題上，對於背景圖片比背景框還大的狀況，還須要作一下處理：html

1 /*針對IE8的hack，目的是除掉以前background*/
2                 background:none\9;

根據canius（http://caniuse.com/#search=background-size），background-size兼容性爲IE9以及以上瀏覽器，以下圖所示。chrome

實例代碼：瀏覽器

 1 <!doctype html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <title>background-size 兼容性處理</title>
 7         <style type="text/css">
 8             * {
 9                 margin: 0;
10                 padding: 0;
11             }
12             
13             .parent {
14                 width: 400px;
15                 height: 400px;
16                 margin: 100px;
17                 border: 1px solid red;
18                 background: url(img/aaa.jpg) no-repeat center center;
19                 background-size: 100% 100%;
20             }
21         </style>
22     </head>
23 
24     <body>
25         <div class="parent">
26         </div>
27     </body>
28 
29 </html>

效果：url

（1）chrome瀏覽器：spa

（2）IE8瀏覽器：code

兼容性方案：

使用filter屬性：orm

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                border: 1px solid red;
                background: url(img/aaa.jpg) no-repeat center center;
                background-size: 100% 100%;
                /*針對IE8的hack，目的是除掉以前background*/
                background: none\9;
                /*下一行爲關鍵設置*/
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/aaa.jpg', sizingMethod='scale');
            }

IE8瀏覽器效果：htm