一篇文章帶你了解CSS Opacity(透明度)
回復(fù)“前端”即可獲贈(zèng)前端相關(guān)學(xué)習(xí)資料
opacity CSS屬性指定元素的透明度。opacity屬性指定了一個(gè)元素的透明度。換言之，opacity屬性指定了一個(gè)元素后面的背景的被覆蓋程度。
一、跨瀏覽器透明度
現(xiàn)在，透明度(opacity )是CSS3規(guī)范的一部分，但是它存在了很長(zhǎng)時(shí)間。但是，較舊的瀏覽器具有不同的方式來(lái)指定不透明度或透明度。
二、Firefox，Safari，Chrome，Opera和IE9中的CSS不透明度
當(dāng)前瀏覽器中CSS不透明度的最新語(yǔ)法。
示例
<html><head><meta charset="utf-8"><title>CSS 透明度示例title><style>p {opacity: 0.7;padding: 10px;background: #00ff00;}style>head><body style="background-color:aqua ;"><p>這段文字70%不透明(或30%透明)。使用<code>opacitycode>值，看看它是如何工作的p>body>html>
解析：
上面的樣式規(guī)則將使段落元素70％不透明（或30％透明）。
opacity屬性的取值范圍為0.0到1.0。設(shè)置為opacity:?1;會(huì)使元素完全不透明（即0％透明），opacity:?0;而使元素完全透明（即100％透明）。
Internet Explorer 8及更低版本中的CSS透明度實(shí)現(xiàn)方法
Internet Explorer 8和更早版本支持僅Microsoft的屬性“ alpha過(guò)濾器”來(lái)指定元素的透明度。
示例
<style>p {filter: alpha(opacity=50);zoom: 1; /* Fix for IE7 */}style>
注：
IE中的Alpha過(guò)濾器接受從0到值100。該值0使元素完全透明（即100％透明），而該值100使元素完全不透明（即0％透明）。
三、兼容所有瀏覽器的CSS透明度
例：
p {opacity: 0.5; /* Opacity for Modern Browsers */filter: alpha(opacity=50); /* Opacity for IE8 and lower */zoom: 1; /* Fix for IE7 */}
警告：
包括alpha過(guò)濾器以指定Internet Explorer 8和更低版本中的透明性，因?yàn)檫@是僅Microsoft的屬性，而不是標(biāo)準(zhǔn)的CSS屬性，所以在樣式表中會(huì)創(chuàng)建無(wú)效的代碼。
1. CSS圖像透明度
還可以使用CSS Opacity制作透明圖像。
下圖中的三個(gè)圖像均來(lái)自同一源圖像。它們之間的唯一區(qū)別是它們的透明度。
<html><head><meta charset="utf-8"><title>項(xiàng)目title><style>div {margin-right: 20px;}.img01{opacity: 1;}.img02{opacity: 0.5;}.img03{opacity: 0.25;}style>head><body style="background-color:aqua ;"><div><div style="float: left;"><img src="img/diamond.jpg" class="img01" /><p>opacity:1p>div><div style="float: left;"><img src="img/diamond.jpg" class="img02" /><p>opacity:0.5p>div><div><img src="img/diamond.jpg" class="img03" /><p>opacity:0.25p>div>div>body>html>
運(yùn)行效果：
2. 透明框中的文字
在元素上使用不透明度時(shí)，不僅元素的背景將具有透明度，而且其所有子元素也將變?yōu)橥该鳌Ｈ绻煌该鞫鹊闹底兏撸瑢⑹雇该髟貎?nèi)部的文本難以閱讀。
例：
div {float: left;opacity: 0.7;border: 1px solid #949781;}p {float: left;position: relative;margin-left: -400px;}
為了防止這種情況，可以使用透明的PNG圖像，也可以將文本塊放在透明框的外面，然后使用負(fù)邊距或CSS定位將其可視地推入內(nèi)部。
四、總結(jié)
本文基于CSS基礎(chǔ)，介紹了CSS Opacity改變圖片透明度，不同的瀏覽器中的圖片透明度改變的方法。瀏覽器的兼容性， 改變透明框中的文字，都通過(guò)案例的分析進(jìn)行詳細(xì)的講解。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來(lái)很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問(wèn)題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望能夠幫助你更好的學(xué)習(xí)。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請(qǐng)?jiān)诤笈_(tái)回復(fù)【入群】
萬(wàn)水千山總是情，點(diǎn)個(gè)【在看】行不行