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 上查看此页面 • 报告此内容的问题