Comment appliquer un filtre CSS à une image d'arrière-plan ?

J&#8217ai un fichier JPEG que j&#8217utilise comme image d&#8217arrière-plan pour une page de recherche, et j&#8217utilise 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 ?

[1] : https://en.wikipedia.org/wiki/Backbone.js

Temani Afif
Question modifiée 26 juillet 2019 в 7:21
Programmation
css css-filters background-image
18 novembre 2013 в 3:49
9 vues
Solution

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.

Mise à jour

Merci à Matthew Wilcoxson pour une meilleure implémentation utilisant .content:before http://codepen.io/akademy/pen/FlkzB

ths
Réponse modifiée 27 juillet 2019 в 4:09
Commentaires (17)

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.

[1] : http://en.wikipedia.org/wiki/HTML

Peter Mortensen
Réponse modifiée 29 novembre 2014 в 11:49
Commentaires (0)

Dans l'onglet .content de CSS, changez-le en position:absolute. Sinon, la page affichée ne pourra pas être défilée.

Webruster
Réponse modifiée 15 septembre 2015 в 12:50
Commentaires (0)