opacity()

Baseline 已廣泛支援

此特性已非常成熟，可在多種裝置和瀏覽器版本上使用。自 ⁨2016 年 9 月⁩以來，它已在各大瀏覽器中可用。

opacity() CSS 函式對輸入影像中的取樣應用透明度。它的結果是一個 <filter-function>。

試一試

filter: opacity(1);

filter: opacity(80%);

filter: opacity(50%);

filter: opacity(0.2);

filter: opacity(0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

注意：此函式類似於更成熟的 opacity 屬性。區別在於使用濾鏡時，某些瀏覽器會提供硬體加速以獲得更好的效能。

語法

css

opacity(amount)

引數

amount 可選: 轉換量，指定為 <number> 或 <percentage>。值為 0% 時完全透明，而值為 100% 時輸入不變。0% 到 100% 之間的值是對效果的線性乘數。插值的初始值為 1。預設值為 1。

正式語法

<opacity()> = 
  opacity( [ <number> | <percentage> ]? )

示例

opacity() 的正確值示例

css

opacity(0%)   /* Completely transparent */
opacity(50%)  /* 50% transparent */

opacity()     /* No effect */
opacity(1)

規範

規範
濾鏡效果模組第 1 級 # funcdef-filter-opacity

瀏覽器相容性

另見

在 filter 和 backdrop-filter 屬性值中可用的其他 <filter-function> 函式包括：
CSS opacity 屬性

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者於 2025 年 10 月 10 日最後修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題