CSS opacity 屬性
更多“自己嘗試”的例子見下文。
定義和用法
opacity 屬性用於設定元素的透明度級別。
透明度級別描述了透明的程度，其中 1 表示完全不透明，0.5 表示 50% 透明（半透明），0 表示完全透明。
注意：當使用 opacity 屬性為元素的背景新增透明度時，其所有子元素也會變得透明。這可能導致完全透明元素內的文字難以閱讀。如果你不想將透明度應用於子元素，請改用 RGBA 顏色值（參見下面的“更多示例”）。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 不透明度 | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
CSS 語法
opacity: number|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| 數字 | 指定透明度。範圍從 0.0（完全透明）到 1.0（完全不透明）。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
opacity 屬性為元素的背景及其所有子元素添加了透明度。這使得透明元素內的文字難以閱讀。
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
自己動手試一試 »
示例
要避免對子元素應用透明度（如上面的示例），請改用 **RGBA** 顏色值。下面的示例為背景顏色設定了透明度，但不對文字設定。
div.first {
background: rgba(76, 175, 80, 0.1);
}
div.second {
background: rgba(76, 175, 80, 0.3);
}
div.third {
background: rgba(76, 175, 80, 0.6);
}
自己動手試一試 »
提示：在 CSS RGBA 顏色 中瞭解更多關於 RGBA 顏色的資訊。
示例
如何使用 JavaScript 更改元素的透明度
function myFunction(x) {
// 返回所選選項的文字
var opacity = x.options[x.selectedIndex].text;
var el = document.getElementById("p1");
if (el.style.opacity !== undefined) {
el.style.opacity = opacity;
} else {
alert("您的瀏覽器不支援此示例！");
}
}
自己動手試一試 »
相關頁面
CSS 教程： CSS Opacity / Transparency
CSS 教程： CSS RGBA 顏色
HTML DOM 參考： opacity 屬性
