web-dev-qa-db-fra.com

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 Backbone.js contexts:

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

Je souhaite appliquer un filtre flou CSS 3 uniquement à l'arrière-plan, mais je ne suis pas sûr de savoir comment styliser cet é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 de background-image dans mon CSS, cela met en forme la page entière, plutôt que l'arrière-plan. Y at-il un moyen 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?

csscss3blurcss-filters
418
fox

Découvrez ce stylo .

Vous devrez utiliser deux conteneurs différents, l'un pour l'image de fond 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 dans leur affichage provient des valeurs z-index qui ont été définies différemment pour les éléments.

HTML

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

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

Toutes mes excuses pour le Lorem Ipsum Text. 

Mettre à jour

Merci à Matthew Wilcoxson pour une meilleure implémentation avec .content:beforehttp://codepen.io/akademy/pen/FlkzB

491
Aniket

stylo

Abolir le besoin d'un élément supplémentaire, tout en faisant en sorte que le contenu s'intègre au flux de documents plutôt que d'être fixe/absolu comme d'autres solutions.

Réalisé en utilisant

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

Le dépassement automatique est nécessaire, sinon le fond sera compensé de quelques pixels en haut.

Après cela, vous avez simplement besoin

.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 des bords, utilisez une largeur et une hauteur de 110% et une gauche et une hauteur de -5%. Cela agrandira un peu vos arrière-plans - mais aucune couleur unie ne doit saigner des bords. 

Stylo mis à jour ici: https://codepen.io/anon/pen/QgyewB - Merci à Chad Fawcett pour cette suggestion.

63
Necrone

Comme indiqué dans d'autres réponses, ceci 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 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 (voir caniuse.com pour les statistiques).

De Mozilla devdocs :

La propriété filtre de fond fournit des effets tels que le flou ou le décalage de couleur de la zone située derrière un élément, qui peuvent ensuite être vus à travers cet élément en ajustant la transparence/l'opacité de l'élément.

Vous l'utiliseriez comme ceci:

.box {
  -webkit-backdrop-filter: blur(5px); // Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+
  backdrop-filter: blur(5px); // No one supports non prefixed yet
}

Pour les statistiques, voir caniuse.com

30
hitautodestruct

Pour ce faire, vous devez restructurer votre HTML . Vous devez brouiller tout l'élément pour brouiller l'arrière-plan. Donc, si vous voulez que l'arrière-plan soit flou, il doit être son propre élément.

26
posit labs

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-triangles-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;
}
<div class="backgroundImageCVR">
    <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>
</div>

6
Sumitava Das

Solution simple pour les navigateurs modernes en pure css avec un pseudo-élément 'before' comme celle de Matthew Wilcoxson . Pour éviter d'avoir à accéder au pseudo-élément afin de modifier l'image et d'autres attributs dans le script Java, il suffit d'utiliser hériter comme valeur et y accéder via l'élément parent (ici body).

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 */  
}
5
a99

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

2
saikat

tout ce dont vous avez réellement besoin est "filter: blur (" Quoi!

body {
  color: #fff;
  font-family: Helvetica, Arial, sans-serif;
}

#background {
  background-image: url('https://cdn2.geckoandfly.com/wp-content/uploads/2018/03/ios-11-3840x2160-4k-5k-beach-ocean-13655.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  
  /* START */
  /* START */
  /* START */
  /* START */
  
  /* You can adjust the blur-radius as you'd like */
  filter: blur(3px);
  
}
<div id="background"></div>

<p id="randomContent">Lorem Ipsum</p>

1
codeWithMe

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');
}

from https://developer.wordpress.com/docs/photon/api/#filter

1
Max Tusken

Bien que toutes les solutions mentionnées soient très astucieuses, toutes semblaient présenter des problèmes mineurs ou des répercussions potentielles sur d'autres éléments de la page lorsque je les ai essayées.

En fin de compte, pour gagner du temps, je suis simplement retourné à mon ancienne solution: j'ai utilisé Paint.NET et je suis allé à Effects, Gaussian Blur avec un rayon de 5 à 10 pixels et je l'ai enregistré comme image de page. :-)

HTML:

<body class="mainbody">
</body

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 enfin fait fonctionner, mais la solution n’est pas simple! Vois ici:

1
SharpC

Maintenant, cela devient encore plus simple et plus flexible en utilisant CSS GRID.

<div class="container">
 <div class="imgbg"></div>
 <h2>
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis enim
  aut rerum mollitia quas voluptas delectus facere magni cum unde?:)
 </h2>
</div>

et le css:

.container {
        display: grid;
        width: 30em;
      }

.imgbg {
        background: url(bg3.jpg) no-repeat center;
        background-size: cover;
        grid-column: 1/-1;
        grid-row: 1/-1;
        filter: blur(4px);
      }


     .container h2 {
        text-transform: uppercase;
        grid-column: 1/-1;
        grid-row: 1/-1;
        z-index: 2;
      }
0
Eljeddi Oussema

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

0
prajeesh loremine

Je n'ai pas écrit cela, mais j'ai remarqué qu'il y avait un polyfill pour le backdrop-filter partiellement pris en charge à l'aide du compilateur CSS SASS. Ainsi, si vous avez un pipeline de compilation, vous pouvez le réaliser facilement: (utilise également TypeScript)

https://codepen.io/mixal_bl4/pen/EwPMWo

0
Jonathan

Cette réponse concerne une mise en page de carte horizontale Material Design avec hauteur dynamique et une image.

Pour éviter toute distorsion de l'image en raison de la hauteur dynamique de la carte, vous pouvez utiliser une image de remplacement en arrière-plan avec un flou pour ajuster les changements de hauteur.

Explication

  • La carte est contenue dans un <div> avec class wrapper , qui est une Flexbox. 
  • La carte est composée de 2 éléments, une image qui est aussi un lien, et un contenu. 
  • Le lien <a>, classe lien , est positionné relatif. 
  • Le lien est constitué de 2 sous-éléments, un espace réservé <div> classe flou et un <img> classe image qui est l’image claire.
  • Les deux sont positionnés absolute et ont width: 100%, mais la classe pic a un ordre de pile plus élevé, c’est-à-dire 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 inline 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;
}
<div class="wrapper">
  <a href="#" class="link">
    <div class="blur" style="background: url('http://www.planwallpaper.com/static/assets/img/header.jpg') 50% 50% / cover;"></div>
    <img src="http://www.planwallpaper.com/static/assets/img/header.jpg" alt="Title" class="pic" />
  </a>

  <div class="content">
    <p class="text">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. </p>
  </div>
</div>

0
Harsha Alva