J’ai un fichier JPEG que j’utilise comme image d’arrière-plan pour une page de recherche, et j’utilise CSS pour le définir car je travaille dans des contextes [Backbone.js][1] :
background-image: url("whatever.jpg");
Je veux appliquer un filtre flou CSS 3 seulement à l'arrière-plan, mais je ne sais pas comment styliser ce seul élément. Si j'essaie :
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
juste en dessous de background-image
dans mon CSS, cela donne un style à toute la page, et pas seulement à l'arrière-plan. Existe-t-il un moyen de sélectionner uniquement l'image et d'y appliquer le filtre ? Ou bien, existe-t-il un moyen de désactiver le flou pour tous les autres éléments de la page ?
Regardez ce [stylo] (http://codepen.io/aniketpant/pen/DsEve).
Vous devrez utiliser deux conteneurs différents, l'un pour l'image d'arrière-plan et l'autre pour votre contenu.
Dans l'exemple, j'ai créé deux conteneurs, .background-image
et .content
.
Les deux sont placés avec position : fixed
et left : 0 ; right : 0;
. La différence d'affichage provient des valeurs z-index
qui ont été définies différemment pour les éléments.
.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>
Toutes mes excuses pour le texte Lorem Ipsum.
Merci à Matthew Wilcoxson pour une meilleure implémentation utilisant .content:before
http://codepen.io/akademy/pen/FlkzB
Pour ce faire, vous devez restructurer votre [HTML][1]. Vous devez brouiller l'ensemble de l'élément pour pouvoir brouiller l'arrière-plan. Ainsi, si vous souhaitez ne brouiller que l'arrière-plan, celui-ci doit être un élément à part entière.