Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
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.
Dieinvert()CSSFunktion invertiert die Farbmuster 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> <img src="/shared-assets/images/examples/firefox-logo.svg" width="200" /></section>Syntax
/* No inversion */invert(0)/* Complete inversion */invert()invert(1)invert(100%)/* 60% inversion */invert(.6)invert(60%)Parameter
<number>oder<percentage>OptionalGibt die Menge der Konvertierung an. Ein Wert von
100%ist vollständig invertiert, während ein Wert von0%den Eingang unverändert lässt. Werte zwischen0%und100%sind lineare Multiplikatoren auf den Effekt. Der Ausgangswert fürInterpolation ist0. Der Standardwert ist1.
Formale Syntax
<invert()> =
invert([<number>|<percentage>]?)
SVG-Filter
Das SVG-<feComponentTransfer>-Filterelement kann auch verwendet werden, um Inhalte zu invertieren, indem eine äquivalente Inversion auf verschachtelten<feFuncR>,<feFuncG> und<feFuncB> Tabellenelementen erzeugt wird. Wir setzen denselbentableValue für die roten, grünen und blauen Filterprimitiven auf denselben Wert, dann können wir den SVG-Effekt durch die ID des<filter> referenzieren:
<svg role="none"> <filter> <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:
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 angewendeteninvert()-Filterfunktion, ein Bild mit der äquivalenten SVG-Funktion und das Originalbild:
SVG
Wir erstellen einen SVG-Filter, der den Inhalt, auf den er angewendet wird, um 70% invertiert:
<svg height="0"> <filter> <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 basierend auf ihrerfilter- odersvgFilter-Klasse invertiert:
.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 src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg" alt="Pride flag" /> </td> <td> <svg height="220" width="220" overflow="visible"> <filter> <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 Werten derfilter undbackdrop-filter Eigenschaften verwendet werden können, umfassen: