Jeg har en JPEG-fil som jeg bruker som bakgrunnsbilde for en søkeside, og jeg bruker CSS for å angi den fordi jeg jobber innenfor Backbone.js sammenhenger:
background-image: url("whatever.jpg");
Jeg ønsker å bruke en CSS 3 uskarphet filter bare til bakgrunnen, men jeg'm ikke sikker på hvordan å style bare at ett element. Hvis jeg prøver:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
rett under background-image
i min CSS, det stiler hele siden, i stedet for bare bakgrunnen. Er det en måte å velge bare bildet og bruke filteret på det? Alternativt, er det en måte å bare slå av uskarpheten for alle andre elementer på siden?
Sjekk ut denne pennen.
Du må bruke to forskjellige beholdere, én for bakgrunnsbildet og én for innholdet ditt.
I eksemplet har jeg opprettet to beholdere, .background-image
og .content
.
Begge er plassert med position: fixed
og left: 0; right: 0;
. Forskjellen i visningen av dem kommer fra z-index
-verdiene som er satt forskjellig for elementene.
.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>
Beklager Lorem Ipsum-teksten.
Takk til Matthew Wilcoxson for en bedre implementering ved hjelp av .content:before
http://codepen.io/akademy/pen/FlkzB
Du må omstrukturere HTML for å gjøre dette. Du må gjøre hele elementet uskarpt for å gjøre bakgrunnen uskarp. Så hvis du bare vil gjøre bakgrunnen uskarp, må den være et eget element.