1. 程式人生 > >透明遮罩在IE瀏覽器的相容性—RGBA

透明遮罩在IE瀏覽器的相容性—RGBA

1、rgba基本能解決透明背景帶來的遮罩效果:rgba(0, 0, 0, 0.5),效果如圖:


2、但是rgba在IE8及以下是不相容的,可以使用IE濾鏡處理:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#7F000000, endColorstr=#7F000000);
前兩位是十六進位制的不透明度,後邊六位是色值。常見透明度和十六進位制關係,詳情戳這裡

加上IE濾鏡處理後IE8及以下瀏覽器都有了遮罩透明效果;但是IE9的顏色被加深了:

因為IE9同時識別rgba和filter,是的效果重疊了,所以需要給遮罩層(clsaa為hide)新增:

:root .hide{filter:none;}
:root支援IE9及以上瀏覽器,與後邊的類名有空格。

到此為止透明遮罩已經相容所有瀏覽器!!!

那有沒有更好的方法,一氣呵成解決透明遮罩的效果呢?

3、擷取1畫素的透明效果圖片(.png),給hide新增背景圖:

background的相容性還是無敵的,無敵是多麼寂寞!!!