Wie man einen CSS-Filter auf ein Hintergrundbild anwendet

Ich habe eine JPEG-Datei, die I' m mit als Hintergrundbild für eine Suchseite, und I' m mit CSS, um es zu setzen, weil I' m arbeiten innerhalb Backbone.js Kontexte:

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

Ich möchte einen CSS 3 Weichzeichnungsfilter nur auf den Hintergrund anwenden, aber ich bin mir nicht sicher, wie ich nur dieses eine Element gestalten kann. Wenn ich es versuche:

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

unterhalb von background-image in meinem CSS versuche, wird die gesamte Seite und nicht nur der Hintergrund gestaltet. Gibt es eine Möglichkeit, nur das Bild auszuwählen und den Filter auf dieses anzuwenden? Oder gibt es eine Möglichkeit, den Weichzeichner für jedes andere Element auf der Seite auszuschalten?

Temani Afif
Bearbeitete Frage 26. Juli 2019 в 7:21
Programmierung
css css-filters background-image
18. November 2013 в 3:49
12 Aufrufe
Lösung

Sehen Sie sich diesen [Stift] (http://codepen.io/aniketpant/pen/DsEve) an.

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

In diesem Beispiel habe ich zwei Container erstellt, .background-image und .content.

Beide werden mit Position: fixed und left: 0; right: 0; platziert. Der Unterschied in der Darstellung kommt von den z-index-Werten, die für die Elemente unterschiedlich festgelegt 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 für den Lorem Ipsum Text.

Aktualisierung

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

ths
Bearbeitete Antwort 27. Juli 2019 в 4:09
Kommentare (17)

Dazu müssen Sie Ihr HTML umstrukturieren. Sie müssen das gesamte Element unscharf machen, um den Hintergrund unscharf zu machen. Wenn Sie also nur den Hintergrund unscharf machen wollen, muss es ein eigenes Element sein.

Peter Mortensen
Bearbeitete Antwort 29. November 2014 в 11:49
Kommentare (0)

In der Registerkarte .content in CSS ändern Sie es auf position:absolute. Andernfalls wird die gerenderte Seite nicht scrollbar sein.

Webruster
Bearbeitete Antwort 15. September 2015 в 12:50
Kommentare (0)