Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
<filter-function>
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.
Der<filter-function>CSSDatentyp repräsentiert einen grafischen Effekt, der das Erscheinungsbild eines Eingabebildes verändern kann. Er wird in den Eigenschaftenfilter undbackdrop-filter verwendet.
Syntax
Der<filter-function> Datentyp wird unter Verwendung einer der unten aufgeführten Filterfunktionen angegeben. Jede Funktion erfordert ein Argument, das, falls ungültig, dazu führt, dass kein Filter angewendet wird.
blur()Weichzeichnet das Bild.
brightness()Macht das Bild heller oder dunkler.
contrast()Erhöht oder verringert den Kontrast des Bildes.
drop-shadow()Wendet einen Schlagschatten hinter dem Bild an.
grayscale()Konvertiert das Bild in Graustufen.
hue-rotate()Ändert den gesamten Farbton des Bildes.
invert()Kehrt die Farben des Bildes um.
opacity()Macht das Bild transparent.
saturate()Über-sättigt oder entsättigt das Eingabebild.
sepia()Konvertiert das Bild in Sepia.
Formale Syntax
<filter-function> =
<blur()>|
<brightness()>|
<contrast()>|
<drop-shadow()>|
<grayscale()>|
<hue-rotate()>|
<invert()>|
<opacity()>|
<sepia()>|
<saturate()>
<blur()> =
blur(<length>?)
<brightness()> =
brightness([<number>|<percentage>]?)
<contrast()> =
contrast([<number>|<percentage>]?)
<drop-shadow()> =
drop-shadow([<color>?&&<length>{2,3}])
<grayscale()> =
grayscale([<number>|<percentage>]?)
<hue-rotate()> =
hue-rotate([<angle>|<zero>]?)
<invert()> =
invert([<number>|<percentage>]?)
<opacity()> =
opacity([<number>|<percentage>]?)
<sepia()> =
sepia([<number>|<percentage>]?)
<saturate()> =
saturate([<number>|<percentage>]?)
Beispiele
Vergleich von Filterfunktionen
Dieses Beispiel bietet eine Grafik, ein Auswahlmenü, mit dem Sie zwischen den verschiedenen Arten von Filterfunktionen wählen können, und einen Schieberegler, mit dem Sie die innerhalb der Filterfunktion verwendeten Werte variieren können. Die Aktualisierung der Steuerelemente aktualisiert den Filtereffekt in Echtzeit, sodass Sie die Effekte verschiedener Filter untersuchen können.
Das Dropdown-Menü wählt den Funktionsnamen aus, und der Schieberegler setzt den Parameterwert für diese Funktion. Fürdrop-shadow wird der Wert sowohl für die horizontalen als auch vertikalen Versätze verwendet, und der Radius wird auf die Hälfte des Wertes gesetzt.
<div></div><ul> <li> <label for="filter-select">Choose a filter function:</label> <select> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li><input type="range" /><output></output></li> <li> <p>Current value: <code></code></p> </li></ul>div { width: 100%; height: 512px; background-image: url("https://mdn.github.io/shared-assets/images/examples/fx-nightly-512.png"); background-repeat: no-repeat; background-position: center center;}li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px;}input { width: 60%;}output { width: 5%; text-align: center;}select { width: 40%; margin-left: 2px;}const selectElem = document.querySelector("select");const divElem = document.querySelector("div");const slider = document.querySelector("input");const output = document.querySelector("output");const curValue = document.querySelector("p code");selectElem.addEventListener("change", () => { setSlider(selectElem.value); setDiv(selectElem.value);});slider.addEventListener("input", () => { setDiv(selectElem.value);});function setSlider(filter) { switch (filter) { case "blur": slider.value = 0; slider.min = 0; slider.max = 30; slider.step = 1; slider.setAttribute("data-unit", "px"); break; case "brightness": case "contrast": case "saturate": slider.value = 1; slider.min = 0; slider.max = 4; slider.step = 0.05; slider.setAttribute("data-unit", ""); break; case "drop-shadow": slider.value = 0; slider.min = -20; slider.max = 40; slider.step = 1; slider.setAttribute("data-unit", "px"); break; case "opacity": slider.value = 1; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setAttribute("data-unit", ""); break; case "grayscale": case "invert": case "sepia": slider.value = 0; slider.min = 0; slider.max = 1; slider.step = 0.01; slider.setAttribute("data-unit", ""); break; case "hue-rotate": slider.value = 0; slider.min = 0; slider.max = 360; slider.step = 1; slider.setAttribute("data-unit", "deg"); break; default: console.error("Unknown filter set"); }}function setDiv(filter) { const unit = slider.getAttribute("data-unit"); const offset = `${Math.round(slider.value)}${unit}`; const radius = `${Math.round(Math.abs(slider.value / 2))}${unit}`; divElem.style.filter = filter === "drop-shadow" ? `${selectElem.value}(${offset} ${offset} ${radius})` : `${selectElem.value}(${slider.value}${unit})`; updateOutput(); updateCurValue();}function updateOutput() { output.textContent = slider.value;}function updateCurValue() { curValue.textContent = `filter: ${divElem.style.filter}`;}setSlider(selectElem.value);setDiv(selectElem.value);Spezifikationen
| Specification |
|---|
| Filter Effects Module Level 1 # typedef-filter-function |
Browser-Kompatibilität
Siehe auch
- Eigenschaften, die diesen Datentyp verwenden:
filterundbackdrop-filter