在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.圖片下部分是半透明的盒子，盒子內有描述性的文字。
.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不會影響文字。
.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。
.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.電商網站上(如天貓)和新聞網站上(如好奇心研究所)上有需要出現半透明效果的地方。大多數是采用如下兩種結構：
.href{
display:inline-block;
width:250px;
height:400px;
margin:20px;
text-decoration: none;
color:#000;
}
用a標簽包裹著圖片標簽和存放文字的盒子，此時的a標簽表現為塊級元素，a標簽的寬度和高度均大于圖片的寬度和高度。當鼠標懸浮到a標簽上，a標簽內的圖片會加上半透明效果，筆者并未找到實現這樣效果的css，猜想可能是由JS實現，若筆者猜想有誤，還請觀者指正。
或者是這樣的結構：
在父盒子里面放兩個絕對定位的子盒子，一個放圖片，一個放文字，放文字的盒子是個表現為塊狀元素的a標簽，將背景色設置為了半透明顏色，筆者猜想是父盒子響應了鼠標懸浮事件，然后修改a標簽的visibility屬性。
一個父盒子的opacity會影響子盒子，opacity也大多是用于圖片上，而rgba是用于顏色上。而opacity這個屬性還具有更有意思的地方，那就是創建層疊上下文，這個筆者會在下篇文章《細說opacity和層疊上下文》中分析。
