詳解css透明度之rgba和opacity的區(qū)別及兼容

對(duì)于設(shè)置透明度,我們有兩個(gè)可以選的css3屬性:rgba 和 opacity
opacity
用法:
#box{ background-color:rgb(125,25,0); opacity: 0.5 }
IE9, Firefox, Chrome, Opera 和 Safari 使用屬性 opacity 來(lái)設(shè)定透明度。
opacity 屬性能夠設(shè)置的值從 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)。x 能夠取的值從 0 到 100。值越小,越透明。
所以如果項(xiàng)目為了要兼容IE8及以下,則需要寫兩段代碼
#box{ background-color:rgb(125,25,0); opacity: 0.5; filter:alpha(opacity=50); /* 針對(duì) IE8 以及更早的版本 */ }
RGBA
用法:
#box{ background-color: rgba(0, 0, 0, .5); }
RGBA 顏色值是 RGB 顏色值的擴(kuò)展,帶有一個(gè) alpha 通道 - 它規(guī)定了對(duì)象的不透明度。
RGBA 顏色值得到以下瀏覽器的支持:IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
RGBA 顏色值是這樣規(guī)定的:rgba(red, green, blue, alpha)。alpha 參數(shù)是介于 0.0(完全透明)與 1.0(完全不透明)的數(shù)字。
那么對(duì)于IE8及以下需要做以下兼容:
#box{ filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000); }
其中:#88000000 的前兩位數(shù)字控制透明度,取值16進(jìn)制從00 -> FF(越小越透明),00表示完全透明,F(xiàn)F就是全不透明,后面六位是色值。
**※注意:
如果在IE9里面同時(shí)使用這RGBA兩種方法時(shí),會(huì)造成沖突而無(wú)法做到透明度的實(shí)現(xiàn)。
而對(duì)于opacity是可以兩個(gè)一起寫,沒(méi)有沖突問(wèn)題!**
opacity 和 rgba 的區(qū)別
為此我們?cè)O(shè)置了兩個(gè)盒子來(lái)作為對(duì)比
html代碼:
<div id="box1"> <div class="pane"></div> box1-opacity演示效果 </div> <div id="box2"> <div class="pane"></div> box2-rgba演示效果 </div>
css代碼:
#box1{ width: 100px; height: 100px; color:black; background-color:rgb(125,25,0); opacity: 0.5; } #box2{ margin-top: 10px; width: 100px; height: 100px; color:black; background-color: rgba(125,25,0, .5); } .pane{ width: 20px; height: 20px; background-color:red; }
結(jié)果如圖:
從上面的結(jié)果我們可以看到 opacity 可以影響字體以及紅色小方塊的透明度,而 rgba 不會(huì)。
說(shuō)明了子元素會(huì)繼承父元素的 opacity 屬性
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
css之Display、Visibility、Opacity、rgba和z-index: -1的區(qū)別
這篇文章主要介紹了css之Display、Visibility 和 Opacity 的區(qū)別,方便我們后期根據(jù)需要選擇,需要的朋友可以參考下2020-11-07- 這篇文章主要介紹了詳解CSS-opacity子元素繼承父元素透明度的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面2020-09-08
- CSS 圖像透明度opacity想必大家并不陌生吧,使其可以讓圖片或者頁(yè)面擁有透明效果,下面為大家講解下CSS opacity的使用及其兼容性,感興趣的朋友可以參考下2013-09-08
- 這篇文章主要舉例介紹了CSS中的cursor屬性,包括zoom-in/zoom-out和grab/grabbing等常用屬性值的使用,需要的朋友可以參考下2015-06-08
詳解CSS中postion和opacity及cursor的特性
background-postion接收多個(gè)值在瀏覽器中已經(jīng)兼容,我們可以用background-position來(lái)代替calc()函數(shù),從而去實(shí)現(xiàn)左方向或右方向的定位,這篇文章主要介紹了詳解CSS中postio2022-08-08