Sådan anvender du et CSS-filter på et baggrundsbillede

Jeg har en JPEG-fil, som jeg bruger som baggrundsbillede på en søgeside, og jeg bruger CSS til at indstille det, fordi jeg arbejder i Backbone.js kontekster:

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

Jeg vil gerne anvende et CSS 3 slørfilter kun på baggrunden, men jeg er ikke sikker på, hvordan jeg skal style kun dette ene element. Hvis jeg prøver:

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

lige under background-image i min CSS, så styles hele siden og ikke kun baggrunden. Er der en måde at vælge kun billedet og anvende filteret på det? Alternativt, er der en måde at slå sløret fra for alle andre elementer på siden?

Temani Afif
Redigeret spørgsmål 2019ør juli 2019 в 7:21
Programmering
css css-filters background-image
2013ør november 2013 в 3:49
10 visninger
Løsning

Se denne [pen] (http://codepen.io/aniketpant/pen/DsEve).

Du skal bruge to forskellige containere, den ene til baggrundsbilledet og den anden til dit indhold.

I eksemplet har jeg oprettet to containere, .background-image og .content.

De er begge placeret med position: fixed og left: 0; right: 0;. Forskellen i visningen af dem kommer fra z-index-værdierne, som er indstillet forskelligt for elementerne.

.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>

Jeg undskylder for Lorem Ipsum teksten.

Opdatering

Tak til Matthew Wilcoxson for en bedre implementering ved hjælp af .content:before http://codepen.io/akademy/pen/FlkzB

ths
Redigeret svar 2019ør juli 2019 в 4:09
Kommentarer (17)

Du skal omstrukturere din HTML for at kunne gøre dette. Du er nødt til at sløre hele elementet for at sløre baggrunden. Så hvis du kun vil sløre baggrunden, skal den være sit eget element.

Peter Mortensen
Redigeret svar 2014ør november 2014 в 11:49
Kommentarer (0)

I fanen .content i CSS ændrer du den til position:absolute. Ellers vil den side, der gengives, ikke kunne rulles.

Webruster
Redigeret svar 2015ør september 2015 в 12:50
Kommentarer (0)