Anwenden eines Filters auf ein Bild im Hintergrund

0
12

Sie können einen filter anwenden, um ein gesamtes element ganz leicht mit der filter-Eigenschaft. Aber was, wenn Sie einen filter anwenden möchten, nur um den hintergrund eines Elements? Es ist unheimlich schwierig.

Es gibt CSS-Eigenschaften, die spezifische Hintergründe, wie background-blend-mode — aber Vermischung und Filter sind nicht das gleiche. Es sorta scheint der Grund dafür zu sein, haben wir hintergrund-filter, aber nicht ganz. Das macht das filtern als hintergrund interagiert mit dem, was hinter dem element.

Es gibt keine hintergrund-filter, leider. Was sollen wir tun?

Verwenden Sie ein pseudo-element anstelle eines hintergrund

Wenn Sie den Inhalt des Elements in einem inneren wrapper, mit dem Sie festlegen können, dass an der Spitze ein pseudo-element, das ist einfach nur vorgibt, ein hintergrund.

.Modul {
position: relative;
}
.Modul::before {
content: “”;
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image: url(graphic-to-be-filtered.jpg);
filter: grayscale(100%);
}
.Modul-inside {
/* Damit wird es stapeln auf die ::vor */
position: relative;
}

Finden Sie die Pen-Filter Anwenden, um Pseudo-Element von Chris Coyier (@chriscoyier) auf CodePen.

Sehen Sie, wie die “background” gefiltert wird mit den Graustufen gibt es? Wir nannten den Graustufen-filter angewendet, nur das pseudo-element wird, während der rest des Inhalts innerhalb ungefiltert.

Es hängt davon ab, welche Art der Filterung Sie wollen… Sie könnten in der Lage sein, gefälschte es mit Füllmethoden

Ich lief in dieses Problem, wie ich war, die speziell versuchen, Graustufen-Hintergrundbild eines Elements. Da, wie wir bereits abgedeckt, es ist keine spezifische Eigenschaft, die nur für diese, dachte ich über background-blend-mode, vor allem, wie es Fülloptionen für Dinge wie Sättigung und Farbe. Wenn ich könnte rein schwarz über den oberen Rand der Grafik, dann könnte ich mischen, wie kann ich mit mehreren hintergrund — und im Grunde fake-Graustufen-Effekt.

Beachten Sie, dass Sie nicht verwenden können, eine solide Farbe, indem Sie sich beim arbeiten mit mehreren Hintergründen (das wäre eine hintergrund-Farbe nicht background-image), so haben wir als fake, als auch mit einem no-übergang linear-gradient.

.Modul {
background-image:
linear-gradient(black, schwarz),
url(image-to-be-fake-filters.jpg);
background-size: cover;
background-blend-mode: Sättigung;
}

Finden Sie den Stift Anwenden Fake-Filter mit Blend-Modus von Chris Coyier (@chriscoyier) auf CodePen.

Dan Wilson Untersuchungen

Hab Dan Weg in dieses und machte eine explorative Pen, in denen gibt es drei Ebenen:

  1. Oberste Schicht: eine vignette aus einer radial-gradient
  2. Mittlere Schicht: solid color
  3. Untere Ebene: Bild-Grafik

Sie können die Farben anpassen, die verwendet werden auf den beiden oberen Ebenen und wenden unterschiedliche Füllmethoden. Das war eine andere Sache, die ich gelernt! Wie können Sie durch Komma getrennt, mehrere Hintergründe (und ebenfalls mit background-size, background-position und so gelten diese Werte zu bestimmten Hintergründen) Sie können auch Komma-getrennte background-blend-mode für die verschiedenen blending-Effekte auf jeder Ebene.

Finden Sie die Stift-Mehrere Hintergründe, Mehrere Füllmethoden von Dan Wilson (@danwilson) auf CodePen.