invert()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨September 2016⁩.

Die invert()-CSS-Funktion invertiert die Farbwerte im Eingabebild. Das Ergebnis ist eine <filter-function>.

Probieren Sie es aus

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>

Syntax

css

/* No inversion */
invert(0)

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

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

Parameter

<number> or <percentage> Optional: Gibt die Menge der Umwandlung an. Ein Wert von 100% ist vollständig invertiert, während ein Wert von 0% den Eingabewert unverändert lässt. Werte zwischen 0% und 100% sind lineare Multiplikatoren für den Effekt. Der Anfangswert für Interpolation ist 0. Der Standardwert ist 1.

Formale Syntax

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

Das SVG-<feComponentTransfer>-Filterelement kann ebenfalls verwendet werden, um Inhalte zu invertieren, indem gleichwertige Inversionen in verschachtelten <feFuncR>, <feFuncG> und <feFuncB>-Tabellenelementen erstellt werden. Wir setzen denselben tableValue für die roten, grünen und blauen Filterprimitive auf denselben Wert, dann können wir den SVG-Effekt über die ID des <filter> referenzieren:

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>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

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

Beispiele

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit einer invert()-Filterfunktion angewendet, ein Bild mit der äquivalenten SVG-Funktion angewendet, und das Originalbild:

SVG

Wir erstellen einen SVG-Filter, der den Inhalt, auf den er angewendet wird, um 70% invertiert:

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

Wir binden CSS ein, das Elemente basierend auf ihren filter- oder svgFilter-Klassen invertiert:

css

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

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

th,
td {
  padding: 5px;
}

<table>
  <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>

Spezifikationen

Specification
Filter Effects Module Level 1 # funcdef-filter-invert

Browser-Kompatibilität

Siehe auch

Die anderen <filter-function>-Funktionen, die in den Werten der filter- und backdrop-filter-Eigenschaften verwendet werden können, sind:

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden