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

2021-08-14 21:51:32 字數 696 閱讀 3944

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
:root支援ie9及以上瀏覽器,與後邊的類名有空格。到此為止透明遮罩已經相容所有瀏覽器!!!

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

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

ie6瀏覽器相容性

塊狀元素設定float 左浮動或有浮動 並且設定margin值之後,第乙個浮動的元素其左側margin值為正常的2倍,如圖,可以看到第乙個元素的左側邊距於其他元素兩兩之間的邊距一致,也就是其左邊距為正常邊距的兩倍 解決方法 給元素設定display inline即讓元素不為塊狀元素,如圖第乙個元素左...

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...