So wenden Sie einen CSS-Filter auf ein Hintergrundbild an

Question

Ich habe eine JPEG-Datei, die ich als Hintergrundbild für eine Suchseite verwende, und verwende CSS, um sie festzulegen, weil ich darin arbeite Backbone.js Kontexte:

background-image: url("whatever.jpg");

Ich möchte einen CSS 3-Unschärfefilter anwenden nur in den Hintergrund, aber ich bin mir nicht sicher, wie ich nur dieses eine Element stylen soll.Wenn ich es versuche:

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

knapp darunter background-image In meinem CSS wird die gesamte Seite formatiert und nicht nur der Hintergrund.Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter darauf anzuwenden?Gibt es alternativ eine Möglichkeit, die Unschärfe einfach für jedes andere Element auf der Seite zu deaktivieren?

Answer 1

Schau dir das an Stift.

Sie müssen zwei verschiedene Container verwenden, einen für das Hintergrundbild und einen für Ihren Inhalt.

Im Beispiel habe ich zwei Container erstellt, .background-image Und .content.

Beide sind mit platziert position: fixed Und left: 0; right: 0;.Der Unterschied in der Anzeige ergibt sich aus der z-index Werte, die für die Elemente unterschiedlich eingestellt wurden.

.background-image {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1;
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.content {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  margin-left: 20px;
  margin-right: 20px;
}

<div class="background-image"></div>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
    rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
    quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
  <p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
    tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>

Entschuldigung dafür Lorem Ipsum Text.

Aktualisieren

Dank an Matthew Wilcoxson für eine bessere Umsetzung mit .content:before http://codepen.io/akademy/pen/FlkzB

Answer 2

Stift

Dadurch entfällt die Notwendigkeit eines zusätzlichen Elements und die Anpassung des Inhalts an den Dokumentenfluss erfolgt, anstatt wie bei anderen Lösungen fest/absolut zu sein.

Erreicht mit

.content {
  overflow: auto;
  position: relative;
}

Es ist ein automatischer Überlauf erforderlich, da sonst der Hintergrund oben um einige Pixel versetzt wird.

Danach brauchen Sie nur noch

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('img-here');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

BEARBEITEN Wenn Sie die weißen Ränder an den Rändern entfernen möchten, verwenden Sie eine Breite und Höhe von 110% und eine linke und obere Seite -5%.Dadurch wird Ihr Hintergrund etwas vergrößert, aber an den Rändern sollte keine Volltonfarbe einlaufen.

Aktualisierter Stift hier: https://codepen.io/anon/pen/QgyewB - Danke Chad Fawcett für den Vorschlag.

Answer 3

Wie in anderen Antworten angegeben, kann dies erreicht werden mit:

.
• Eine Kopie des verschwommenen Bildes als Hintergrund.
• ein Pseudoelement, das filtriert werden kann, dann hinter dem Inhalt positioniert.

Sie können auch backdrop-filter .

Es gibt eine unterstützte Eigenschaft namens generakodicetagcode, und ist derzeit Unterstützt in Chrom 76, Rand , Safari und iOS Safari (siehe caniuse.com für Statistiken).

von Mozilla devdocs :

Die Untertropfen-Filter-Eigenschaft sorgt für Effekte wie Unschärfe oder Farbe, die den Bereich hinter einem Element verschieben, das dann durch dieses Element gesehen werden kann, indem er die Transparenz / Deckkraft des Elements einstellt.

siehe caniuse.com für die Nutzungsstatistik.

Sie würden es wie so verwenden:

generasacodicetagpre. generasacodicetagpre.

update (12/06/2019) : chromium wird mit backdrop-filter versandt, der standardmäßig in der Version 76 aktiviert ist, in der ist vom 30.07.2019 .

update (01.06.2019) : das mozzilla firefox team hat angekündigt, es beginnt, dies bald daran zu arbeiten.

update (21.05.2019) : chromium nur angekündigt backdrop-filter ist in Chrome Canary erhältlich, ohne dass "Experimentelle Webplattform mit experimenteller Webplattform aktivieren". Dies bedeutet, dass der backdrop-filter in allen Chromplattformen sehr nahe ist.