CSS-Funktion `invert()`

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit September 2016 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Funktion invert() invertiert die Farbwerte im Eingabebild. Ihr 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> oder <percentage> Optional: Gibt den Grad der Invertierung an. Bei einem Wert von 100% wird das Eingabebild vollständig invertiert, während es bei 0% unverändert bleibt. Werte zwischen 0% und 100% skalieren den Effekt linear. Werte über 100% sind zulässig, der Effekt wird jedoch auf 100% begrenzt. Negative Werte sind nicht zulässig. Der Anfangswert für die Interpolation ist 0. Der Standardwert ist 1.

Formale Syntax

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

Das SVG-Filterelement <feComponentTransfer> kann ebenfalls verwendet werden, um Inhalte zu invertieren. Dazu wird eine entsprechende Invertierung auf den untergeordneten Tabellenelementen <feFuncR>, <feFuncG> und <feFuncB> erstellt. Wenn wir für die roten, grünen und blauen Filterprimitive denselben tableValue festlegen, können wir den SVG-Effekt anschließend ü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 angewendeter invert()-Filterfunktion, ein Bild mit der entsprechenden SVG-Funktion und das Originalbild:

SVG

Wir erstellen einen SVG-Filter, der die Inhalte, auf die er angewendet wird, zu 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 fügen CSS hinzu, das Elemente anhand ihrer Klasse filter oder svgFilter 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

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

Browser-Kompatibilität

Siehe auch

Zu den weiteren <filter-function>-Funktionen, die als Werte der Eigenschaften filter und backdrop-filter verwendet werden können, gehören:

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

CSS-Funktion invert()

Help improve MDN

CSS-Funktion `invert()`