Verwendung von Filtereffekten

Vorteile der Verwendung von CSS-Filtereffekten

Das Filtereffektmodul in CSS bietet Eigenschaften und Funktionen, mit denen Sie die oben beschriebenen visuellen Effekte anwenden können, ohne Photoshop oder zusätzliche HTTP-Anfragen verwenden zu müssen. Die einzige erforderliche Software ist der Browser des Nutzers. Darüber hinaus sind CSS-Filtereffekte im Gegensatz zu voreingestellten Bildeffekten reaktionsfähig und animierbar.

Das CSS-Filtereffektmodul bietet die filter und backdrop-filter Eigenschaften, die Sie verwenden können, um das Rendering von Text, Bildern, Hintergründen und Rahmen oder eines beliebigen Elements, auf das Sie diese Eigenschaften anwenden, zu beeinflussen. Dieses Modul definiert auch den Datentyp <filter-function>, mit dem Sie grafische Effekte wie Unschärfe oder Farbverschiebung hinzufügen können. Mit den Filterfunktionen können Sie nicht nur das Erscheinungsbild eines Elements ändern, sondern auch auf einen SVG-Filter verweisen, den Sie erstellen.

Filtereffekteigenschaften

Die folgenden zwei Filtereigenschaften des CSS-Filtereffektmoduls ermöglichen es Ihnen, null, einen oder mehrere grafische Effekte auf ein Element anzuwenden:

• Mit der Eigenschaft filter können Sie Filtereffekte wie Unschärfe, Schlagschatten und Sepia auf ein Element anwenden, bevor das Element gerendert wird. Die Filtereffekte werden direkt auf das Element angewendet, einschließlich der Inhalte des Elements, der Rahmen und der Innenabstände.

• Mit der Eigenschaft backdrop-filter können Sie grafische Effekte auf den Bereich hinter einem Element (den "Hintergrund" des Elements) anwenden. Die backdrop-filter Eigenschaft wird oft verwendet, um den Vordergrundinhalt lesbarer zu machen, insbesondere wenn der größere Bereich, auf dem der Inhalt platziert ist, nicht genug Kontrast für den Inhalt bietet. Die Filtereffekte werden nur auf den Hintergrund des Elements angewendet und nicht auf den Inhalt des Elements.

Die filter und backdrop-filter Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Filtern, die in der deklarierten Reihenfolge angewendet werden.

Filterfunktionen

Das CSS-Filtereffektmodul bietet 10 <filter-function> Funktionen sowie die Möglichkeit, eine fast endlose Anzahl von Effekten mithilfe von SVG-Filtern zu definieren, die über einen url()-Verweis angewendet werden.

Die folgende Tabelle listet die 10 Filterfunktionen auf, zusammen mit ihren Wertetypen, dem minimalen gültigen Wert, falls zutreffend, dem größten Wert, der einen Effekt erzeugt, und dem Anfangswert, der für die Interpolation verwendet wird.

Der minimal erlaubte Wert wird für Filterfunktionen angegeben, die einen Minimalwert haben. Wenn ein Wert angegeben wird, der unter dem Mindestwert liegt, macht dies die gesamte Eigenschaftsdeklaration ungültig, nicht nur die fehlerhafte Filterfunktion in der durch Kommas getrennten Liste.

Der maximale Effektwert kann überschritten werden. Ein Wert, der den angegebenen Maximalwert überschreitet, ist gültig, erhöht jedoch den Effekt nicht über den angegebenen Maximalwert hinaus. Mit anderen Worten, der Effekt auf das Element wird gleich aussehen wie mit dem eingestellten Maximalwert. Zum Beispiel erzeugt sepia(400%) im Sepia-Beispiel denselben Effekt wie sepia(100%), der Höchstwert.

Der Standardwert ist ein Wert, der keinen Effekt erzeugt. Obwohl diese Werte keinen Effekt erzeugen, liefern sie die anfänglichen Interpolationswerte und bieten ein Beispiel dafür, wie der Wert festgelegt werden kann. Diese Standardwerte bieten eine Skala zwischen dem zulässigen Mindestwert und dem maximalen Effektwert.

Anwendung von Filtereffekten

Die filter und backdrop-filter Eigenschaften akzeptieren eine Liste von Filterfunktionen, die einen oder mehrere <filter-function> enthalten, das Standard-Schlüsselwort none oder einen SVG-Filter als url()-Wert enthalten kann.

Anwendung des Sepia-Filtereffekts

Wenn Sie über das sepiafarbene Bild unten fahren, sehen Sie das Vollfarbenbild sofort erscheinen.

Das Bild wird auf Sepia gesetzt, indem der Wert der filter-Eigenschaft als die sepia() Filterfunktion angegeben wird. Der Filter wird auf :hover und :focus entfernt, indem filter: none festgelegt wird.

<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

Im <img>-Element ist tabindex auf 0 gesetzt, um den Fokus für Tastaturnutzer zu ermöglichen, ohne die Tabulatorreihenfolge zu ändern, da <img> kein interaktives Element ist.

img {
  max-width: 100%;
  height: 100%;
}

Anwendung von Filtereffekten auf andere Elemente

Obwohl sie im Allgemeinen auf Bilder angewendet werden, können die filter und backdrop-filter Eigenschaften auf jedes Element oder Pseudo-Element angewendet werden.

In diesem Beispiel wird ein Leuchteffekt mithilfe eines drop-shadow() Filters mit einer 3px Unschärfe und 0 Versatz hinzugefügt.

h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1>Glow created with CSS filter</h1>

Anwendung mehrerer Filter

Während das Sepia-Filterbeispiel nur eine einzelne Filterfunktion enthielt, können Sie mehrere Filter festlegen. Die filter und backdrop-filter Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Filtern, die in der deklarierten Reihenfolge angewendet werden.

Dieses Beispiel wendet zwei Filter an — hue-rotate() und blur() — über die backdrop-filter-Eigenschaft. Der Hintergrund, der Bereich hinter dem <p> Element, hat eine Farbverschiebung und eine Unschärfe erhalten.

.container {
  background: url("/shared-assets/images/examples/listen_to_black_women.jpg")
    no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 10%);
  text-shadow: 2px 2px black;
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: white;
  font-size: 2rem;
  font-family: sans-serif;
}

<div class="container">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Anwendung wiederholter Filter

Da Filter in der Reihenfolge angewendet werden, können Sie Filterfunktionen mehr als einmal verwenden. In diesem Beispiel wurde der drop-shadow() Filter vier Mal verwendet, jedes Mal mit einem anderen <shadow>-Wert.

<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

img {
  width: 49%;
}

img {
  filter: drop-shadow(2px 2px 0 magenta) drop-shadow(-2px -2px 0 royalblue)
    drop-shadow(2px 2px 0 lime) drop-shadow(-2px -2px 0 darkorange);
}
img + img {
  filter: none;
}

Im ersten Mandala-Beispiel werden vier Schlagschatten auf ein liniengezeichnetes SVG angewendet. Dasselbe SVG, mit entferntem Filter durch filter: none, ist zum Vergleich enthalten.

Reihenfolge der Filterfunktionen angeben

Bei der Erstellung von Filtereffekten wird der filter oder backdrop-filter-Eigenschaft eine durch Leerzeichen getrennte Liste von Filtern bereitgestellt. Diese Filtereffekte werden in der Reihenfolge angewendet, in der sie erscheinen.

In diesem Beispiel werden sowohl magenta Schlagschatten als auch 180deg Farbtonrotation auf die Überschrift der ersten Ebene angewendet. Das Beispiel zeigt den Effekt, wenn diese Filter in verschiedenen Reihenfolgen angewendet werden.

h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1 id="hueFirst">Hue change happens before drop shadow.</h1>
<h1 id="shadowFirst">Drop shadow applied before hue change.</h1>
<h1>No filter effects applied.</h1>

Die gleichen Filter werden auf beide Textzeilen angewendet, jedoch in unterschiedlicher Reihenfolge. In der ersten Zeile wird der Farbton des Textes verändert, bevor der Schatten angewendet wird, sodass der Schatten magenta ist. In der zweiten Zeile wird der Schlagschatten dem dunkelblauen Text hinzugefügt, und dann wird der Farbton sowohl des Textes als auch des Schattens verändert.

Auf die dritte Zeile wird kein Filtereffekt angewendet, um den ursprünglichen Effekt als Vergleich zu zeigen. Die dritte Zeile bleibt also midnightblue oder #191970. Der hue-rotate(180deg)-Filter ändert den Text in den ersten beiden Zeilen zu #252500.

Verwendung von SVG-Filtern

Zusätzlich zu den 10 definierten <filter-function>s unterstützen CSS-Filtereffekte url(), wobei der Parameter ein SVG-Filter ist, der in einer internen oder externen SVG-Datei eingebettet sein kann.

Ein einzelnes SVG kann verwendet werden, um mehrere Filter zu definieren, jeweils mit einer id:

<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

Die id des Filters wird im url() sowohl für Inline- als auch externe SVGs referenziert:

filter: url("#blur3");
filter: url("https://example.com/svg/filters.svg#blur3");

Ein Bild verwischen

Genau wie die blur() Filterfunktion einen Gaußschen Weichzeichner auf die Elemente anwendet, auf die sie angewendet wird, kann auch das SVG <feGaussianBlur> Filterelement verwendet werden, um Inhalt zu verwischen.

In beiden Fällen definiert der Unschärferadiuswert, der als <length> in CSS und als pixeläquivalenter <number> in SVG angegeben wird, den Wert der Standardabweichung zur gaußschen Funktion. Mit anderen Worten bestimmt er die Anzahl der Pixel auf dem Bildschirm, die ineinander übergehen; ein größerer Wert erzeugt mehr Unschärfe.

Das <filter> Attribut stdDeviation akzeptiert bis zu zwei Werte, die es ermöglichen, komplexere Unschärfewerte zu erstellen. Um eine äquivalente Unschärfe zu erzeugen, geben wir einen Wert für stdDeviation an:

<table>
  <thead>
    <tr>
      <th>CSS example</th>
      <th>SVG example</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="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"
          class="svgFilter" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

Der SVG url()-Filterwert kann als Wert des SVG <image> Elementattributs filter oder als Teil des Wertes der CSS-filter und backdrop-filter Eigenschaften enthalten sein.

th,
td {
  padding: 5px;
}

.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url("#blur");
}

Siehe auch

• mask
• background-blend-mode, mix-blend-mode
• CSS-Filtereffekte
• SVG <filter> Element, SVG filter Attribut in SVG
• Anwenden von SVG-Effekten auf HTML-Inhalte