CSS半透明效果的屬性和場景

在css中與半透明效果相關的屬性有兩個：opacity和rgba。

opacity屬性的值規定透明度。從 0.0 （完全透明）到 1.0（完全不透明）。設定opacity元素的所有後代元素會隨著一起具有透明性，一般用於調整或者模組的整體不透明度。ie8 以及更早的版本支援替代的 filter 屬性。例如：filter:alpha(opacity=50)。

rgba用於設定顏色的透明度，引數是rgba(red, green, blue, alpha) alpha的取值從 0（完全透明）到 1（完全不透明），如rgba(255,255,255,0.8)。

接下來通過場景來描述半透明效果的實現。

1.滑鼠懸浮在上，變半透明。做法是給新增乙個偽類，修改opacity

.image:hover

2.下部分是半透明的盒子，盒子內有描述性的文字。

小指頭 .rgba .bottom

3.下部有文字，滑鼠懸浮在上，變模糊，文字不受影響。外面乙個盒子，裡面有兩個盒子，分別放和文字，的下外邊距為負值，文字就蓋在上。和文字不在同乙個盒子內，所以改變的opacity不會影響文字。

小指頭.image1 .image1:hover .text1

4.滑鼠懸浮在上，上出現垂直水平居中的文字，文字是通過偽元素新增的。出現半透明效果，如果將文字設定為白色，文字的半透明效果會很小。它的好處就是只需要寫乙個div。

用a標籤包裹著標籤和存放文字的盒子，此時的a標籤表現為塊級元素，a標籤的寬度和高度均大於的寬度和高度。當滑鼠懸浮到a標籤上，a標籤內的會加上半透明效果，筆者並未找到實現這樣效果的css，猜想可能是由js實現，若筆者猜想有誤，還請觀者指正。

或者是這樣的結構：

這是一些文字

在父盒子裡面放兩個絕對定位的子盒子，乙個放，乙個放文字，放文字的盒子是個表現為塊狀元素的a標籤，將背景色設定為了半透明顏色，筆者猜想是父盒子響應了滑鼠懸浮事件，然後修改a標籤的visibility屬性。

乙個父盒子的opacity會影響子盒子，opacity也大多是用於上，而rgba是用於顏色上。而opacity這個屬性還具有更有意思的地方，那就是建立層疊上下文，這個筆者會在下篇文章《細說opacity和層疊上下文》中分析。