視覺上的透明效果

IE瀏覽器 · 發表 2018-11-20 17:05:00

摘要：透明[tòu míng][transparency]，是物質透過光線的性質或情況。而在計算機中，指客觀存在並且執行著但是我們看不到的特性。比如一個 div 標籤就是透明的，我們看不見，但實實在在的存在於頁面上。在頁面中沒有全透明和不透明的效果存在，有的只是半透明...

透明 [tòu míng] [transparency]，是物質透過光線的性質或情況。而在計算機中，指客觀存在並且執行著但是我們看不到的特性。比如一個 div 標籤就是透明的，我們看不見，但實實在在的存在於頁面上。

在頁面中沒有全透明和不透明的效果存在，有的只是半透明，所以我們今天就說說CSS怎麼實現半透明的效果。半透明效果在網頁設計中是很常見的，尤其是在電商類、遊戲專題類的網站用的更多，在頁面中加入透明效果，不僅在視覺上給人以過渡效果，而且有一種細膩的柔美，使用者的體驗會很不錯哦。

下面是一些常見的效果：

在CSS中要實現上面的效果，一般有以下幾種方法。

一、opacity 屬性

語法：opacity="1"

該值是一個 number 值，預設值1，取值範圍是[0.0~1.0]之間，0完全透明，1不透明。

opacity: 0.5;

-webkit-opacity: 0.5;//Chrome

-moz-opacity: 0.5; //Firefox

現代瀏覽器大部分已經支援 opacity 這個屬性了，以後就沒必要加上指定私有字首咯。

屬性值前面的前導零是可以省略的，0.5 =>.5

使用 opacity 這個屬性會有一個問題，當父元素設定透明度後，子元素也會繼承該透明度，你再對子元素設定透明度為1，也就是設定為不透明，它也不會生效的，但是你設定小於1的值，透明度會進行疊加，父元素的透明度 * 子元素的透明度 = 子元素最終的透明度。所以你子元素設定透明度，再怎麼設定也不會超過1的。

楊絮隨風舞 opacity：1
楊絮隨風舞 opacity：0.5
楊絮隨風舞 opacity：0.25
楊絮隨風舞 opacity：0.25

<strong class="opacity-05"><b class="opacity-1">楊絮隨風舞</b></strong>

<strong class="opacity-05"><b class="opacity-05">楊絮隨風舞</b></strong>

<strong class="opacity-05"><b class="opacity-025">楊絮隨風舞</b></strong>

<strong class="opacity-025"><b>楊絮隨風舞</b></strong>

我們需要的只是黑色的背景透明，文字是不需要透明的，但瀏覽器自作主張的給透明瞭，這不是我們要的效果。解決這個問題，傳統的辦法是弄兩個層，一個背景層，一個文字層，兩層是同輩關係，讓背景層透明，然後文字層定位到背景層上。傳統的方法是很繁瑣的，需要多寫HTML結構，結構稍微一動就需要改不少地方。

二、IE的私有濾鏡

IE的私有濾鏡比較多，也很混亂，就和IE本身一樣，版本眾多，相容性差。

語法：filter:alpha(opacity=100);

這個值也是一個 number 值，取值範圍是[0~100]之間，0完全透明，100不透明。

filter:alpha(opacity=50); //IE6/IE7/IE8濾鏡

除了上面這種簡潔的語法外，還有幾種稍微複雜的語法，如下：

filter: Alpha(Opacity=50, FinishOpacity=50, Style=1, StartX=0, StartY=0,
FinishX=100, FinishY=100);

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); //IE6/IE7/IE8/IE9

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; //IE8/IE9

IE的 filter 濾鏡是要 ActiveX 執行的，禁用 ActiveX 的話，濾鏡馬上失效了。而且IE濾鏡實現的效果是比較差，不怎麼理想，在這種情況下，不建議使用濾鏡，用優雅降級的策略更好。IE對濾鏡的依賴是很佔資源開銷的，低版本的IE效能本來就差，還用這些佔開銷的東東，這不是逼著人家崩潰啊。效果一致性並沒有那麼重要，像IE就該區別對待，該放棄就得果斷放棄。

其他的語法和屬性值，自行Google。

三、CSS3的rgba模式

語法：rgba(R, G, B, A);

取值範圍：

R：0~255 紅

G：0~255 綠

B：0~255 藍

A：Alpha透明度，取值0~1之間

color: rgba(255,0,0,0.8);

background: rgba(0,0,0,0.5);

border-color: rgba(255,0,0,0.3);

RGBA是種顏色模式，這種顏色模式和RGB是相同的，都是基於三基色（紅綠藍），所不同的是RGBA多了個引數，Alpha的透明度。透明度的取值在0和1之間，0是全透明，1是不透明。

個人非常喜歡這種模式，顏色中帶點不透明，給人的感覺是很不錯的。通過不同的透明度和顏色的組合，你會發現很多非常出色的搭配。這不是普通的256色的色板能比的。通過這種組合出來的顏色偏向於柔和、舒適，特別是0.4~0.6這幾個透明度，非常適合用在現在流行的扁平化色塊上。這種組合再配上個性字型，真真絕配。

mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 mxue 凝雪 Front-end. I love sue.

rgb的值是在0~255之間的，要是設定255以上，比如256、299，也不會出錯，會強制為255。

rgb的值除了是數值外，還可以是百分比，瀏覽器在解析的時候會自動換成具體的陣列。

相容性：IE8以下是不支援的，對於這種情況，我們完全可以用優雅降級的策略來處理，美則美矣，不支援那就給個差點的效果咯，直接來個文字色吧，誰讓你們這些老傢伙跟不上潮流呢？對吧，要怪就怪 Microsoft 咯。

四、transparent 屬性

<code>color</code>: transparent; <code>//文字色透明

</code><code>background</code>: transparent; <code>//背景色透明

</code><code><code>border</code>-<code>color</code></code>: transparent; <code>//邊框色透明
</code>

background-color 的預設值就是：transparent

將 border-color 的屬性值設定為 transparent 時，IE6下會呈現黑色邊線。

而將 color 設定為 transparent 時，IE6、IE7、IE8的文字色會變成黑色。

在CSS的發展中 transparent 首先是在CSS1中被用來作為 background-color 的一個引數，用來表示背景透明。從CSS2開始，這個值也被邊框 border-color 接受，作為其引數值。在最新的CSS3中，這個值被延伸到任何一個有 color 值的屬性上。

結論：這個屬性還是用在背景裡面比較多，因為在背景裡面瀏覽器的支援度最好，連IE6都是支援的。用在邊框上時，只有IE6不支援，而用在文字上時，相容情況就變得很糟糕，IE8及以下都不支援，不過從語義方面來分析，這是對的，文字都透明瞭，那你還看什麼？

說了這麼多廢話，下面我們寫一下具體效果。

① 傳統的方法：（背景透明，文字不透明）

HTML程式碼：

<div class="overlay">
<img src="images/img.jpg" alt="落雪仙居神難繪" title="落雪仙居神難繪">
<div class="overlay-bg"></div>
<div class="overlay-txt">落雪仙居神難繪</div>
</div>

CSS程式碼：

.overlay{
position: relative;
}
.overlay .overlay-bg{
position: absolute; top: 0; left: 0;
width: 200px; height: 125px;
background: #000;
opacity: .5;
}
.overlay .overlay-txt{
position: absolute; top: 0; left: 0; z-index: 1;
width: 200px; height: 125px; line-height: 125px;
color: #fff;
text-align: center;
}

效果如下：

落雪仙居神難繪

② RGBA的方法：