CSS 不透明度 / 透明度
opacity 屬性指定了元素的可見性/透明度。
透明影像
opacity 屬性可以接受 0.0 - 1.0 之間的值。值越低，透明度越高。
opacity 0.2
opacity 0.5
opacity 1
(預設)
滑鼠懸停時的透明效果
opacity 屬性經常與 :hover 選擇器一起使用，以便在滑鼠懸停時改變不透明度。
示例說明
第一個 CSS 塊與示例 1 中的程式碼相似。此外，我們還添加了當用戶將滑鼠懸停在影像上時會發生什麼。在這種情況下，當用戶將滑鼠懸停在影像上時，我們希望影像不透明。對應的 CSS 是 opacity:1;。
當滑鼠指標移開影像時，影像將再次變得透明。
反向懸停效果的示例
透明框
當使用 opacity 屬性為元素的背景新增透明度時，其所有子元素都會繼承相同的透明度。這會使完全透明元素內的文字難以閱讀。
opacity 1
不透明度 0.6
不透明度 0.3
不透明度 0.1
使用 RGBA 實現透明度
如果您不想像上面示例那樣將不透明度應用於子元素，請使用 **RGBA** 顏色值。以下示例為背景顏色設定了不透明度，但不對文字設定。
100% 不透明度
60% 不透明度
30% 不透明度
10% 不透明度
您已從我們的 CSS 顏色章節中學到，可以使用 RGB 作為顏色值。除了 RGB，您還可以使用帶有 alpha 通道（RGBA）的 RGB 顏色值 - 這會為顏色指定不透明度。
RGBA 顏色值指定格式為：rgba(red, green, blue, alpha)。alpha 引數是一個介於 0.0（完全透明）和 1.0（完全不透明）之間的數字。
提示：您將在我們的 CSS 顏色章節中瞭解更多關於 RGBA 顏色的資訊。
透明框內的文字
這是放置在透明框內的一些文字。
示例
<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"）。
class="transbox" 的 <div> 具有背景顏色和邊框 - 該 div 是透明的。
在透明的 <div> 內部，我們在 <p> 元素中新增一些文字。
