CSS 不透明度 / 透明度
opacity 屬性指定元素的不透明度/透明度。
透明圖像
opacity 屬性的取值范圍為 0.0-1.0。值越低，越透明：
opacity 0.2
opacity 0.5
opacity 1
實例
img {
opacity: 0.5;
}
透明懸停效果
opacity 屬性通常與 :hover 選擇器一同使用，這樣就可以在鼠標懸停時更改不透明度：
實例
img {
opacity: 0.5;
}
img:hover {
opacity: 1.0;
}
例子解釋
第一個 CSS 塊類似于實例 1 中的代碼。此外，我們還添加了當用戶將鼠標懸停在其中一個圖像上時的效果。在這種情況下，當用戶將鼠標懸停在圖像上時，我們希望圖像不透明。這條 CSS 是 opacity:1;。
當鼠標指針離開圖像時，圖像將再次透明。
反向懸停效果的例子：
實例
img:hover {
opacity: 0.5;
}
透明盒
使用 opacity 屬性為元素的背景添加透明度時，其所有子元素都繼承相同的透明度。這可能會使完全透明的元素內的文本難以閱讀：
實例
div {
opacity: 0.3;
}
使用 RGBA 的透明度
如果您不希望對子元素應用不透明度，如上面的例子，請使用 RGBA 顏色值。下面的例子設置背景色而不是文本的不透明度：
您已經從我們的 CSS 顏色 這一章中學到了可以將 RGB 用作顏色值。除 RGB 外，還可以將 RGB 顏色值與 alpha 通道（RGBA）一起使用 - 該通道規定顏色的不透明度。
RGBA 顏色值指定為：rgba(red, green, blue, alpha)。 alpha 參數是介于 0.0（完全透明）和 1.0（完全不透明）之間的數字。
提示：您將在我們的 CSS 顏色 這一章中學到有關 RGBA 顏色的更多知識。
實例
div {
background: rgba(76, 175, 80, 0.3) /* 不透明度為 30% 的綠色背景 */
}
透明盒中的文本
這是一些位于透明框中的文本。
實例
<html>
<head>
<style>
div.background {
background: url(klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>這是一些位于透明框中的文本。</p>
</div>
</div>
</body>
</html>
例子解釋
首先，我們創建一個帶有背景圖像和邊框的 <div> 元素（class="background"）。
然后，我們在第一個 <div> 中創建另一個 <div>（class="transbox"）。
<div class="transbox"> 有背景色和邊框 - 這個 div 是透明的。
在透明的 <div> 內，我們在 <p> 元素內添加了一些文本。
