invert()

Baseline 已廣泛支援

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

invert() CSS 函式會反轉輸入影像中的顏色樣本。它的結果是 <filter-function>。

試一試

filter: invert(0);

filter: invert(0.3);

filter: invert(50%);

filter: invert(70%);

filter: invert(1);

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

語法

css

/* No inversion */
invert(0)

/* Complete inversion */
invert()
invert(1)
invert(100%)

/* 60% inversion */
invert(.6)
invert(60%)

引數

<number> 或 <percentage> 可選: 指定轉換量。值為 100% 表示完全反轉，而值為 0% 則保持輸入不變。介於 0% 和 100% 之間的值是效果的線性乘數。插值的初始值為 0。預設值為 1。

正式語法

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

SVG 濾鏡

SVG <feComponentTransfer> 濾鏡元素也可以透過在巢狀的 <feFuncR>、<feFuncG> 和 <feFuncB> 表元素上建立等效反轉來反轉內容。我們將紅色、綠色和藍色濾鏡基元的 tableValue 設定為相同的值，然後我們可以透過 <filter> 的 ID 來引用 SVG 效果

html

<svg role="none">
  <filter id="invert90">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0" />
      <feFuncG type="table" tableValues="0.1 0" />
      <feFuncB type="table" tableValues="0.1 0" />
    </feComponentTransfer>
  </filter>
</svg>

以下宣告產生相同的效果

css

filter: invert(0.9);
filter: invert(90%);
filter: url("#invert90"); /* with embedded SVG */
filter: url("fileName.svg#invert90"); /* external SVG */

示例

此示例顯示了三張影像進行比較：一張應用了 invert() 濾鏡函式的影像，一張應用了等效 SVG 函式的影像，以及原始影像

SVG

我們建立了一個 SVG 濾鏡，它將應用它的內容反轉 70%

html

<svg height="0">
  <filter id="invert">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.3 0" />
      <feFuncG type="table" tableValues="0.3 0" />
      <feFuncB type="table" tableValues="0.3 0" />
    </feComponentTransfer>
  </filter>
</svg>

CSS

我們添加了 CSS，它將根據元素的 filter 或 svgFilter 類來反轉元素

css

.filter {
  filter: invert(70%);
}

.svgFilter {
  filter: url("#invert");
}

<table cellpadding="5">
  <thead>
    <tr>
      <th><code>invert()</code> filter</th>
      <th>SVG filter equivalent</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="svgFilter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <svg id="svg" height="220" width="220" overflow="visible">
          <filter id="svgInvert">
            <feComponentTransfer>
              <feFuncR type="table" tableValues="0.3 0" />
              <feFuncG type="table" tableValues="0.3 0" />
              <feFuncB type="table" tableValues="0.3 0" />
            </feComponentTransfer>
          </filter>
          <image
            href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
            filter="url('#svgInvert')" />
        </svg>
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

規範

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

瀏覽器相容性

另見

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

幫助改進 MDN

瞭解如何貢獻

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

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