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. Sie wird als Wert für die Eigenschaften filter und backdrop-filter verwendet.

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 das Ausmaß der Umwandlung an. Ein Wert von 100% bewirkt eine vollständige Invertierung, während ein Wert von 0% das Eingabebild unverändert lässt. 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> ]? )

Beispiele

Verwendung des SVG-Filters

Dieses Beispiel zeigt drei Bilder zum Vergleich: ein Bild mit angewendeter invert()-Filterfunktion, ein Bild mit dem entsprechenden SVG-Filter und das Originalbild.

SVG

Das SVG-Filterelement <feComponentTransfer> kann ebenfalls verwendet werden, um Inhalte zu invertieren. Dazu wird eine entsprechende Invertierung mit den untergeordneten Tabellenelementen <feFuncR>, <feFuncG> und <feFuncB> erstellt. Wir setzen tableValue für die roten, grünen und blauen Filterprimitive auf denselben Wert. Anschließend können wir über die ID von <filter> auf den SVG-Effekt verweisen:

html

<svg height="0" role="none">
  <filter id="invert70" color-interpolation-filters="sRGB">
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.7 0.3" />
      <feFuncG type="table" tableValues="0.7 0.3" />
      <feFuncB type="table" tableValues="0.7 0.3" />
    </feComponentTransfer>
  </filter>
</svg>

Die folgenden Deklarationen erzeugen denselben Effekt:

css

filter: invert(0.7);
filter: invert(70%);
filter: url("#invert70"); /* with embedded SVG */
filter: url("fileName.svg#invert70"); /* external SVG */

CSS

Wir fügen CSS hinzu, das Elemente abhängig von ihrer Klasse css-filter oder svg-filter invertiert:

css

.css-filter {
  filter: invert(0.7);
}

.svg-filter {
  filter: url("#invert70");
}

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="css-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          class="svg-filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </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

Modul CSS-Filtereffekte
Zu den weiteren <filter-function>-Funktionen, die als Werte für die 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()

SVG

CSS

Help improve MDN

CSS-Funktion `invert()`