`invert()` CSS-Funktion

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.

Die invert() CSS Funktion invertiert die Farbmuster 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> oder <percentage> Optional: Gibt die Menge der Umkehrung 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 des Effekts. Der anfängliche Wert für die 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 eine äquivalente Inversion auf verschachtelten <feFuncR>, <feFuncG> und <feFuncB> Tabellenelementen erstellt wird. Wir setzen denselben tableValue für die roten, grünen und blauen Filterprimitiven 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 erzielen den gleichen 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 verwenden CSS, das Elemente basierend auf ihrer filter- oder svgFilter-Klasse 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

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

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

invert() CSS-Funktion

Help improve MDN

`invert()` CSS-Funktion