CSS 不透明度

opacity CSS 屬性指定元素的透明度。

跨瀏覽器不透明度

不透明度現在是 CSS3 規範的一部分，但它已經存在了很長時間。但是，較舊的瀏覽器有不同的方法來控制不透明度或透明度。

Firefox，Safari，Chrome，Opera 和 IE9 中的 CSS Opacity

這是所有當前瀏覽器中 CSS 不透明度的最新語法。

p {
    opacity: 0.7;
}

上面的樣式規則將使段落元素 70% 不透明（或 30% 透明）。

opacity 屬性的值為 0.0 到 1.0 之間的值。設定 opacity: 1; 將使元素完全不透明（即 0% 透明）， opacity: 0; 使元素完全透明（即 100% 透明）。

Internet Explorer 8 及更低版本中的 CSS 不透明度

Internet Explorer 8 及更早版本支援僅限 Microsoft 的屬性“alpha 過濾器”來控制元素的透明度。

p {
    filter: alpha(opacity=50);
    zoom: 1;  /* Fix for IE7 */
}

注： 在 IE 瀏覽器 alpha 濾鏡從接受 0 到 100 的值。值 0 使元素完全透明（即 100% 透明），而值 100 使元素完全不透明（即 0% 透明）。

所有瀏覽器的 CSS 不透明度

結合上述兩個步驟，你將獲得所有瀏覽器的 不透明度。

p {
    opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;  /* Fix for IE7 */
}

警告： 在 Internet Explorer 8 及更低版本中包含用於控制透明度的 Alpha 過濾器會在樣式表中建立無效程式碼，因為這是僅限 Microsoft 的屬性，而不是標準 CSS 屬性。

CSS 影象不透明度

你還可以使用 CSS Opacity 製作透明影象。

下圖中的三個影象均來自同一源影象。它們之間的唯一區別是它們的不透明度。

滑鼠懸停時更改影象不透明度

以下示例演示了 CSS 影象不透明度的常見用法，其中當使用者將滑鼠指標移動到影象上時影象的不透明度會發生變化。

- 將滑鼠指標移到影象上以檢視效果。

透明框中的文字

在元素上使用不透明度時，不僅是具有透明度的元素的背景，而且其所有子元素也變得透明。如果不透明度的值變得更高，則使透明元素內的文字難以閱讀。

為了防止這種情況，你可以使用透明的 PNG 影象，或者將文字塊放在透明框之外，並使用負邊距或 CSS 定位 在視覺上將其推入內部。

div {
    float: left;
    opacity: 0.7;
    border: 1px solid #949781;
}
p {
    float: left;
    position: relative;
    margin-left: -400px;
}

使用 RGBA 的 CSS 透明度

除了 RGB CSS3 之外，還引入了一種新方法 RGBA 來指定包含 alpha 透明度作為顏色值一部分的顏色。RGBA 代表紅藍綠 Alpha。

RGBA 宣告是設定顏色透明度的一種非常簡單的方法。

div {
    background: rgba(200, 54, 54, 0.5);
}
p {
    color: rgba(200, 54, 54, 0.25);
}

前三個數字表示 RGB 值中的顏色，即紅色（0-255），綠色（0-255），藍色（0-255），第四個表示 0 到 1 之間的 alpha 透明度值（0 使顏色完全透明，而 1 的值使它完全不透明）。

關於 RGBA 透明度的一個重要特徵是 - 控制單個顏色的不透明度的能力。使用 RGBA，我們可以使元素的文字顏色透明並保持背景完整。

你可以看到使用 RGBA 可以輕鬆控制單個顏色的不透明度而不是整個元素。但是，始終建議為不支援 RGBA 顏色的瀏覽器定義後備顏色。

注意： RGBA 透明度不會像 opacity 屬性那樣影響子元素。RGBA 的 alpha 值會影響單個顏色的透明度，而不是整個元素的透明度。

宣告後備顏色

所有瀏覽器都不支援 RGBA 顏色。但是，你可以為不支援它的瀏覽器提供替代方法，如純色或透明 PNG 影象。

p {
    /* Fallback for web browsers that doesn't support RGBA */
    background: rgb(0, 0, 0);
    /* RGBa with 0.5 opacity */
    background: rgba(0, 0, 0, 0.5);
}

警告： Internet Explorer 8 及更早版本不支援 RGBA 顏色。他們使用漸變濾鏡來實現 RGBA 的效果，這是不推薦使用的。