1.問題:
實現乙個背景透明的效果,用css3用rgba()就能實現,相容到ie8,沒有透明效果,因為ie8不支援rgba()函式。
background: rgba(0,0,0,.5);
2.rgba()函式
rgba的含義,r代表red,g代表green,b代表blue,a代表透明度。紅綠藍是三原色,所有顏色都可以由這三種顏色拼合而成。比如rgba(0,0,0,.5)就是透明度為0.5的黑色。現代瀏覽器是支援rgba的,但是在ie8等古董級瀏覽器中是不支援rgba的,ie8只能勉強支援rgb()函式(即去掉了透明度,只能表示顏色)。
background: rgb(0, 0, 0); /*不支援rgba的瀏覽器*/
background: rgba(0,0,0,.5); /*支援rgba的瀏覽器*/
filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000); /*ie8支援*/
第二句話的意思就是當上一行的透明度不起作用的時候執行。這句話的意思本來是用來做漸變的,但是這個地方不需要漸變。所以兩個顏色都設定成了相同的顏色。
dximagetransform.microsoft.gradient濾鏡裡的startcolorstr引數值是#aarrggbb形式的,其中的aa是代表不透明度的十六進製制,00表示完全透明,ff就是全不透明,化成十進位制的範圍就是0~255,剩下的rrggbb就是顏色的十六進製制**。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的紅色背景。如何把30%的不透明度轉換成十六制呢?很簡單,先計算#aa的的十進位制x,x/255 = 3/10,解得x=3*255/10,然後再把x換算成十六進製制,約等於4b。
解釋下#7f000000,第一部分是#號後面的7f。是rgba透明度0.5的iefilter值。從0.1到0.9每個數字對應乙個iefilter值。對應關係如下:
第二部分是19後面的六位。這個是六進製制的顏色值。要跟rgb函式中的取值相同。比如rgb(0,0,0,)對應#000;都是黑色。
到這裡,rgba的用法就可以相容ie8了。
最近看到,不直接在樣式裡面新增filter,而是利用來為ie新增filter相容。在過後又發現ie9同時支援rgba和filter,導致兩個重疊,透明效果變差,所以需要改為,
具體做法如下:
相容ie8 如何回答 瀏覽器相容
如何機智地回答瀏覽器相容性問題 掘金 同乙份 在各瀏覽器上顯示效果正常,有些不正常 1 要不要做 2 做到什麼程度 3 如何做 貼乙個方方老師對postcss的經典回答 各位前端大神能不能通俗的說一下postcss到底能做什麼?對於手寫css的優勢在哪?www.zhihu.com 4 漸進增強和優雅...
酷易開發心得一 IE8瀏覽器相容
第一篇,先寫乙個最初遇到的乙個問題,隨著ie8的應用,懂得 時尚 的都對自己的瀏覽器公升了級,對於我們開發者也帶來了問題,也就是ie8自帶的乙個相容模式,雖然在ie8中已經有,但有時頁面瀏覽中預設載入模式的不同會引起頁面樣式的改變,當然,每個做開發的都希望自己的作品能夠以最漂亮的面孔展現給使用者,特...
讓Bootstrap 3相容IE8瀏覽器
看到這篇文章有越來越多的人看,我決定給大家節省時間,廢話少說。有幾個點大家要注意。1 本地除錯需要web server 如iis apache,nginx 單純地本地開啟檔案不能看到相容效果。2 如果你發現已經引用了respond.js和bootstrap,仍無效果,請檢視你的bootstrap是否...