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 souhaite appliquer un filtre de flou CSS 3 uniquement à l'arrière-plan, mais je ne sais pas comment styliser uniquement 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 background-imagedans mon CSS, il stylise toute la page, plutôt que juste l'arrière-plan. Existe-t-il un moyen de sélectionner uniquement l'image et d'y appliquer le filtre? 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-imageet .content.

Les deux sont placés avec position: fixedet left: 0; right: 0;. La différence dans leur affichage provient des z-indexvaleurs 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('https://i.imgur.com/lL6tQfy.png');
  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 de Lorem Ipsum .

Mise à jour

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

stylo

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

Atteint en utilisant

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

Un débordement automatique est nécessaire, sinon l'arrière-plan 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);
}

MODIFIER Si vous souhaitez supprimer les bordures blanches sur les bords, utilisez une largeur et une hauteur de 110%et un gauche et un haut de -5%. Cela agrandira un peu vos arrière-plans, mais il ne devrait pas y avoir de saignement de couleur unie à partir des bords.

Stylo mis à jour ici: https://codepen.io/anon/pen/QgyewB - Merci Chad Fawcett pour la 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 aussi utiliser backdrop-filter

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

Depuis les devdocs de Mozilla :

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

Voir caniuse.com pour les statistiques d'utilisation.

Vous l'utiliseriez ainsi:

.background-filter::after {
  -webkit-backdrop-filter: blur(5px); /* Use for Safari 9+, Edge 17+ (not a mistake) and iOS Safari 9.2+ */
  backdrop-filter: blur(5px); /* Supported in Chrome 76 */

  content: "";
  display: block;
  position: absolute;
  width: 100%; height: 100%;
}

.background-filter {
  position: relative;
}

.background {
  background-image: url('https://upload.wikimedia.org/wikipedia/en/6/62/Kermit_the_Frog.jpg');
  width: 200px;
  height: 200px;
}

<div class="background background-filter"></div>

Mise à jour (12/06/2019) : Chromium sera livré avec backdrop-filteractivé par défaut dans la version 76 qui doit sortir le 30/07/2019 .

Mise à jour (01/06/2019) : L'équipe de Mozzilla Firefox a annoncé qu'elle commencerait à travailler sur l'implémentation de cela bientôt.

Mise à jour (21/05/2019) : Chromium qui vient d'être annoncé backdrop-filter est disponible dans Chrome Canary sans activer l'indicateur "Activer les fonctionnalités de la plateforme Web expérimentale". Cela signifie qu'il backdrop-filterest très proche d'être implémenté sur toutes les plateformes Chrome.

Vous devez restructurer votre code HTML pour ce faire. Vous devez flouter tout l'élément afin de rendre l'arrière-plan flou. Donc, si vous voulez flouter 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-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>

Ce qui suit est une solution simple pour les navigateurs modernes en CSS pur avec un pseudo-élément «avant», comme la solution de Matthew Wilcoxson.

Pour éviter d'avoir besoin d'accéder au pseudo-élément pour changer l'image et d'autres attributs en JavaScript, utilisez simplement inheritcomme valeur et accédez-y 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 */
}

Dans l' .contentonglet CSS, changez-le en position:absolute. Sinon, la page rendue ne pourra pas défiler.

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

En fin de compte, pour gagner du temps, je suis simplement revenu à 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 simplement enregistré en tant qu'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;
}

ÉDITER:

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 Opera

Tout ce dont vous avez réellement besoin est un "filtre":

blur(«WhatEverYouWantInPixels»);"

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>

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

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

Il s'agit de https://developer.wordpress.com/docs/photon/api/#filter

Je n'ai pas écrit cela, mais j'ai remarqué qu'il y avait un polyfill pour le partiellement pris backdrop-filteren charge en utilisant le compilateur CSS SASS, donc si vous avez un pipeline de compilation, il peut être bien réalisé (il utilise également TypeScript):

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

Cette réponse est pour une disposition de carte horizontale Material Design avec une hauteur dynamique et une image.

Pour éviter une distorsion de l'image due à la hauteur dynamique de la carte, vous pouvez utiliser une image d'espace réservé d'arrière-plan avec flou pour ajuster les changements de hauteur.

Explication

• La carte est contenue dans un wrapper<div> with class , qui est une boîte flexible.
• La carte est composée de deux éléments, une image qui est aussi un lien, et un contenu.
• Le lien <a>, classe lien , est positionné par rapport .
• Le lien se compose de deux sous-éléments, un flou de<div> classe d' espace réservé et une image de classe qui est l'image claire.<img>
• Les deux sont positionnés en absolu et ont width: 100%, mais la classe pic a un ordre de pile plus élevé, c'est-à-dire z-index: 2qui le 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;
}

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

Maintenant, cela devient encore plus simple et plus flexible en utilisant CSS GRID.Il suffit de chevaucher l'arrière-plan flou (imgbg) avec le texte (h2)

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

$fondo: url(/grid/assets/img/backimage.png);    
{ padding: 0; margin: 0; } 
body { 
    ::before{
        content:"" ; height: 1008px; width: 100%; display: flex; position: absolute; 
        background-image: $fondo ; background-repeat: no-repeat ; background-position: 
        center; background-size: cover; filter: blur(1.6rem);
    }
}

Sans utiliser la pseudo-classe de

body{
    background:#cecece;
    font-family: "Scope One", serif;
    font-size: 12px;
    color:black;
    margin:0 auto;
    height:100%;
    width:100%;
    background-image: 
       linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.81)), 
        url(https://i.imgur.com/2rRMQh7.jpg);
       -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover; 
}

<body></body>

Si vous souhaitez que le contenu puisse défiler, définissez la position du contenu sur absolu:

content {
   position: absolute;
   ...
}

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

De plus, comme l'arrière-plan est fixe, cela signifie que vous avez un effet de "parallaxe" ! Alors maintenant, non seulement cette personne vous a appris à faire un arrière-plan flou, mais c'est aussi un effet d'arrière-plan de parallaxe!