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()-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> <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>or<percentage>OptionalGibt die Menge der Umwandlung an. Ein Wert von
100%ist vollständig invertiert, während ein Wert von0%den Eingabewert unverändert lässt. Werte zwischen0%und100%sind lineare Multiplikatoren für den Effekt. Der Anfangswert fürInterpolation ist0. Der Standardwert ist1.
Formale Syntax
<invert()> =
invert([<number>|<percentage>]?)
SVG-Filter
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 denselbentableValue 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:
<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 einerinvert()-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:
<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 binden CSS ein, das Elemente basierend auf ihrenfilter- odersvgFilter-Klassen 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 den Werten derfilter- undbackdrop-filter-Eigenschaften verwendet werden können, sind: