Einen Filter auf ein Hintergrundbild anwenden

Du kannst einen Filter auf ein ganzes Element ganz einfach mit der filter-Eigenschaft anwenden. Aber was, wenn du einen Filter *nur* auf den Hintergrund eines Elements anwenden möchtest? Das ist seltsamerweise knifflig.

Es gibt CSS-Eigenschaften, die spezifisch für Hintergründe sind, wie z. B. background-blend-mode — aber Überblendung und Filter sind nicht dasselbe. Dies scheint der Grund zu sein, warum wir backdrop-filter haben, aber nicht ganz. Dies wendet Filter an, während der Hintergrund mit dem interagiert, was sich *hinter* dem Element befindet.

Leider gibt es keinen background-filter. Was sollen wir tun?

Verwenden Sie ein Pseudoelement anstelle eines Hintergrunds

Wenn Sie den Inhalt des Elements in einen inneren Wrapper legen, können Sie diesen über einem Pseudoelement positionieren, das einfach als Hintergrund dient.

.module {
  position: relative;
}
.module::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url(graphic-to-be-filtered.jpg);
  filter: grayscale(100%);
}
.module-inside {
  /* This will make it stack on top of the ::before */
  position: relative;
}

Sehen Sie sich den Pen Apply Filter to Psuedo Element von Chris Coyier (@chriscoyier) auf CodePen an.

Sehen Sie, wie der "Hintergrund" dort mit grayscale gefiltert wird? Wir haben den Graustufenfilter dort aufgerufen und ihn nur auf das Pseudoelement angewendet, während der Rest des Inhalts ungefiltert blieb.

Es hängt davon ab, welche Art von Filterung Sie wünschen… möglicherweise können Sie es mit Überblendmodi vortäuschen

Ich stieß auf dieses Problem, als ich speziell versuchte, das Hintergrundbild eines Elements in Graustufen umzuwandeln. Da, wie wir bereits besprochen haben, keine spezielle Eigenschaft dafür existiert, dachte ich an background-blend-mode, insbesondere daran, wie es Überblendungsoptionen für Dinge wie Sättigung und Farbe gibt. Wenn ich reines Schwarz über die Grafik legen könnte, dann könnte ich sie überblenden — so wie ich es mit mehreren Hintergründen kann — und im Wesentlichen einen Graustufeneffekt vortäuschen.

Beachten Sie, dass Sie keine Volltonfarbe allein verwenden können, wenn Sie mit mehreren Hintergründen arbeiten (das wäre eine background-color, keine background-image), daher müssen wir dies auch mit einem linear-gradient ohne Übergang vortäuschen.

.module {
  background-image:
    linear-gradient(black, black),
    url(image-to-be-fake-filters.jpg);
  background-size: cover;
  background-blend-mode: saturation;
}

Sehen Sie sich den Pen Apply Fake Filter with Blend Mode von Chris Coyier (@chriscoyier) auf CodePen an.

Dan Wilsons Erkundungen

Dan hat sich damit intensiv beschäftigt und einen experimentellen Pen erstellt, in dem drei Ebenen vorhanden sind

1. Oberste Ebene: eine Vignette aus einem radial-gradient
2. Mittlere Ebene: Volltonfarbe
3. Untere Ebene: grafisches Bild

Sie können die Farben der oberen beiden Ebenen anpassen und jeder einzelnen unterschiedliche Überblendmodi zuweisen. Das war eine weitere Sache, die ich gelernt habe! So wie Sie durch Kommas trennen können, um mehrere Hintergründe zu erstellen (und ebenso mit background-size, background-position und ähnlichem, um diese Werte auf bestimmte Hintergründe anzuwenden), können Sie auch background-blend-mode durch Kommas trennen, um jeder Ebene unterschiedliche Überblendeffekte zuzuweisen.

Sehen Sie sich den Pen Multiple Backgrounds, Multiple Blend Modes von Dan Wilson (@danwilson) auf CodePen an.