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{
    opacity:0.5;
}

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

<div class="rgba">
    <div class="bottom">小指頭</div>
</div>
.rgba{
    position:relative;
    width: 300px;
    height: 200px;
    margin: 20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.bottom{
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    line-height:30px;
    background-color: rgba(200,200,200,0.4);  //設置顏色的半透明效果
}

3.圖片下部有文字，鼠標懸浮在圖片上，圖片變模糊，文字不受影響。外面一個盒子，裏面有兩個盒子，分別放圖片和文字，圖片的下外邊距爲負值，文字就蓋在圖片上。圖片和文字不在同一個盒子內，因此改變圖片的opacity不會影響文字。

<div style="position:relative;margin:50px;">
    <div class="image1"></div>
    <div class="text1">小指頭</div>
</div>
.image1{
    position:relative;
    width: 300px;
    height: 200px;
    margin-bottom: -20px;
    color:rgb(200,140,50);
    background-image: url("finger.jpg");
    text-align: center;
    cursor:pointer;
}
.image1:hover{
    opacity:0.6;
}
.text1{
    display:block;
    position:absolute;
    bottom:0;
    width:300px;
    height: 20px;
    color:red;
    text-align: center;
    cursor:pointer;
}

4.鼠標懸浮在圖片上，圖片上出現垂直水平居中的文字，文字是經過僞元素添加的。圖片出現半透明效果，若是將文字設置爲白色，文字的半透明效果會很小。它的好處就是隻須要寫一個div。

<div class="image2"></div>
.image2{
    position:relative;
    width: 300px;
    height: 200px;
    margin:20px;
    text-align: center;
    background-image: url("finger.jpg");
    cursor:pointer;
}
.image2:hover{
    opacity:0.8;
}
.image2:hover:after{
    content:"小指頭";
    display:inline-block;
    font-size:25px;
    height:200px;
    line-height:200px;
    color:#fff;
}

5.電商網站上（如天貓）和新聞網站上（如好奇心研究所）上有須要出現半透明效果的地方。大多數是採用以下兩種結構：

<a href="http://www.baidu.com" class="href">
    <img src="finger.jpg" style="width:250px;height:280px;">
    <div>這是一些文字</div>
</a>
.href{
    display:inline-block;
    width:250px;
    height:400px;
    margin:20px;
    text-decoration: none;
    color:#000;
}

用a標籤包裹着圖片標籤和存放文字的盒子，此時的a標籤表現爲塊級元素，a標籤的寬度和高度均大於圖片的寬度和高度。當鼠標懸浮到a標籤上，a標籤內的圖片會加上半透明效果，筆者並未找到實現這樣效果的css，猜測多是由JS實現，若筆者猜測有誤，還請觀者指正。
或者是這樣的結構：

<div style="position:relative;">
    <div style="position:absolute;">
        <img src="finger.jpg" >
    </div>
    <a style="display:block;position:absolute; visibility:hidden;
    background-color:rgba(0,0,0,0.5)">
        <div>這是一些文字</div>
    </a>
</div>

在父盒子裏面放兩個絕對定位的子盒子，一個放圖片，一個放文字，放文字的盒子是個表現爲塊狀元素的a標籤，將背景色設置爲了半透明顏色，筆者猜測是父盒子響應了鼠標懸浮事件，而後修改a標籤的visibility屬性。

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