首頁 > 文章 > web前端 > 詳解rgba相容性處理方法

詳解rgba相容性處理方法

高洛峰原創: 2017-03-21 14:36:321895瀏覽

根據caniuse（http://caniuse.com/#search=rgba），rgba相容性為IE9以及以上瀏覽器。

詳解rgba相容性處理方法

#實例程式碼：

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>rgba 兼容性处理</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            .parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background-color: rgba(0, 0, 0, 0.5);
            }
        </style>
    </head>

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

</html>

chrome瀏覽器效果：

詳解rgba相容性處理方法

# #

IE8瀏覽器效果（無背景）：

詳解rgba相容性處理方法

rgba相容性處理：

.parent {
                width: 400px;
                height: 400px;
                margin: 100px;
                font-size: 20px;
                color: #FF0000;
                border: 1px solid red;
                background: rgba(0, 0, 0, 0.5);
                /*下一句关键设置*/
                filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000);
            }

設定filter屬性目的是上一行的透明度不起作用的時候執行，filter: progid:DXImageTransform.Microsoft.gradient

是用來做漸變的，但是這個地方不需要漸變，所以兩個顏色都設定成了相同的顏色。

這個顏色「#7f000000」是由兩個部分組成的。

第一部是#號後面的7f 。是rgba透明度0.5的IEfilter值。從0.1到0.9每個數字對應一個IEfilter值。對應關係如下：

詳解rgba相容性處理方法