Comment appliquer un filtre de flou CSS 3 à une image d’arrière-plan

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 :

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

Je veux appliquer un filtre de flou CSS 3 uniquement à l’arrière-plan, mais je ne suis pas sûr de savoir comment styliser ce seul élément. Si j’essaye:

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

juste en dessous background-image dans mon CSS, il classe la page entière, plutôt que juste l’arrière-plan. Est-il possible de sélectionner uniquement l’image et d’appliquer le filtre à cela? Sinon, existe-t-il un moyen de désactiver le flou pour tous les autres éléments de la page?

Découvrez ce stylo .

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 la position: fixed et à left: 0; right: 0; left: 0; right: 0; . La différence dans leur affichage provient des valeurs d’ z-index qui ont été définies différemment pour les éléments.

HTML

 

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.

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.

CSS

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

Excuses pour le texte Lorem Ipsum .

Mettre à jour

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

stylo

Supprimer le besoin d’un élément supplémentaire, tout en intégrant le contenu dans le stream de documents plutôt que d’être fixe / absolu comme les autres solutions.

Atteint en utilisant

 .content { overflow: auto; position: relative; } 

Auto débordement est nécessaire, sinon l’arrière-plan sera décalé de quelques pixels au sumt.

Après cela, il vous suffit simplement

 .content:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url('img-here'); background-size:cover; width: 100%; height: 100%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 

EDIT Si vous souhaitez supprimer les bordures blanches sur les bords, utilisez une largeur et une hauteur de 110% et une gauche et une partie supérieure de -5% . Cela élargira votre arrière-plan un peu – mais il ne devrait y avoir aucune couleur solide qui saigne des bords.

Pen mis à jour ici: https://codepen.io/anon/pen/QgyewB – Merci à Chad Fawcett pour sa suggestion.

Comme indiqué dans d’autres réponses, cela peut être réalisé avec:

  • Une copie de l’image floue comme arrière-plan.
  • Un pseudo-élément qui peut être filtré puis positionné derrière le contenu.

Vous pouvez également utiliser le backdrop-filter

Il existe une propriété prise en charge appelée backdrop-filter , elle est actuellement prise en charge dans Edge , Safari et iOS Safari 9.2+ (voir caniuse.com pour les statistiques).

De Mozilla Devdocs :

La propriété backdrop-filter offre des effets tels que le flou ou le changement de couleur de la zone derrière un élément, qui peut alors être vu à travers cet élément en ajustant la transparence / opacité de l’élément.

Vous l’utiliseriez comme ça:

 .box { backdrop-filter: blur(5px); /* background, width, height etc. */ } 

Pour les statistiques, voir caniuse.com

Pour ce faire, vous devez restructurer votre code HTML . Vous devez brouiller l’ensemble afin de rendre l’arrière-plan flou. Donc, si vous voulez brouiller uniquement l’arrière-plan, il doit s’agir de son propre élément.

Veuillez vérifier le code ci-dessous: –

 .backgroundImageCVR{ position:relative; padding:15px; } .background-image{ position:absolute; left:0; right:0; top:0; bottom:0; background:url('http://www.planwallpaper.com/static/images/colorful-sortingangles-background_yB0qTG6.jpg'); background-size:cover; z-index:1; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } .content{ position:relative; z-index:2; color:#fff; } 
 

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.

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.

Solution simple pour les navigateurs modernes en pure CSS avec un pseudo-élément ‘before’ comme la solution de Matthew Wilcoxson. Pour éviter d’avoir à accéder au pseudo-élément pour changer l’image et les autres atsortingbuts du script java, une simple utilisation hérite comme valeur et y accède via l’élément parent (ici le corps).

 body::before{ content: ""; /* important */ z-index: -1; /* important */ position: inherit; left: inherit; top: inherit; width: inherit; height: inherit; background-image: inherit; background-size: cover; filter: blur(8px); } body{ background-image: url("xyz.jpg"); background-size: 0 0; /* image should not be drawn here */ width: 100%; height: 100%; position: fixed; /* or absolute for scrollable backgrounds */ } 

Dans l’onglet .content de CSS, changez-le en position:absolute . Sinon, la page affichée ne sera pas défilable.

Bien que toutes les solutions mentionnées soient très astucieuses, toutes semblaient avoir des problèmes mineurs ou des effets de choc potentiels avec d’autres éléments de la page lorsque je les ai essayées.

Finalement, pour gagner du temps, je suis simplement retourné à mon ancienne solution: j’ai utilisé Paint.NET et je suis passé à Effects, Gaussian Blur avec un rayon de 5 à 10 pixels et je viens de l’enregistrer comme image de la page. 🙂

HTML:

   

CSS:

 body.mainbody { background: url('../images/myphoto.blurred.png'); -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; background-position: top center !important; background-repeat: no-repeat !important; background-attachment: fixed; } 

MODIFIER:

Je l'ai finalement fait fonctionner, mais la solution n'est pas simple! Vois ici:

  • filtre: flou (1px); ne fonctionne pas dans Firefox, IE et Opéra

Cette réponse concerne une disposition de carte horizontale de Material Design avec hauteur dynamic et une image.

Pour éviter toute distorsion de l’image en raison de la hauteur dynamic de la carte, vous pouvez utiliser une image d’espace réservé d’arrière-plan avec un flou pour ajuster les changements de hauteur.

Explication

  • La carte est contenue dans un

    avec class wrapper , qui est une flexbox.

  • La carte est composée de 2 éléments, une image qui est aussi un lien et du contenu.
  • Le lien , lien de classe, est positionné par rapport .
  • Le lien se compose de 2 sous-éléments, un espace réservé

    class blur et une image de classe qui est l’image claire.

  • Les deux sont positionnés en absolu et ont une width: 100% , mais la classe pic a un ordre de stack plus élevé, à savoir z-index: 2 , ce qui la place au-dessus de l’espace réservé.
  • L’image d’arrière-plan de l’espace réservé flou est définie via le style en ligne dans le code HTML.

Code

 .wrapper { display: flex; width: 100%; border: 1px solid rgba(0, 0, 0, 0.16); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.16), 0 1px 1px rgba(0, 0, 0, 0.23); background-color: #fff; margin: 1rem auto; height: auto; } .wrapper:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); } .link { display: block; width: 200px; height: auto; overflow: hidden; position: relative; border-right: 2px solid #ddd; } .blur { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); } .pic { width: calc(100% - 20px); max-width: 100%; height: auto; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .pic:hover { transition: all 0.2s ease-out; transform: scale(1.1); text-decoration: none; border: none; } .content { display: flex; flex-direction: column; width: 100%; max-width: 100%; padding: 20px; overflow-x: hidden; } .text { margin: 0; } 
 
Title

Agendum dicendo memores du gi ad. Perciperem occasionem ei ac im ac designabam. Ista rom sibi vul apud tam. Notaverim to extendere expendere concilium ab. Aliae cogor tales fas modus parum sap nullo. Voluntate ingressus infirmari ex mentemque ac manifeste eo. Ac gnum ei utor sive se. Nec curant contra seriem amisit res gaudet adsunt.

 div{ background: inherit; width: 250px; height: 350px; position: absolute; overflow: hidden; //adding overflow hidden } div:before{ content: ''; width: 300px; height: 400px; background: inherit; position: absolute; left: -25px; //giving minus -25px left position right: 0; top: -25px; //giving minus -25px top position bottom: 0; box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3); filter: blur(10px); } 

Bien sûr, ce n’est pas une solution CSS, mais vous pouvez utiliser CDN Proton avec le filtre:

 body { background: url('https://i0.wp.com/IMAGEURL?w=600&filter=blurgaussian&smooth=1'); } 

à partir de https://developer.wordpress.com/docs/photon/api/#filter

Il suffit de laisser pep savoir si cela n’a pas déjà été dit. Si vous souhaitez que le contenu soit défilable, définissez la position du contenu sur absolue:

 content { position: absolute; ... } 

Je ne sais pas si c’était juste pour moi, mais sinon c’est la solution!

De plus, puisque l’arrière-plan est corrigé, cela signifie que vous avez un effet de «parallaxe»! Alors, sachez que non seulement cette personne vous a appris à créer un arrière-plan flou, mais aussi un effet de fond de parallaxe!