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

467

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?

Renard
la source
2
Ne flouter
vsync

Réponses:

528

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

Aniket
la source
79
Une façon légèrement meilleure de le faire est d'utiliser .content: before au lieu du balisage supplémentaire "background-image". J'ai mis à jour le stylo ici: codepen.io/akademy/pen/FlkzB
Matthew Wilcoxson
6
fwiw, seul Webkit a implémenté cette fonctionnalité, et uniquement avec le préfixe du fournisseur, donc les préfixes ms-, o-, moz- sont inutiles.
Jon z
2
Il est pris en charge par défaut dans Firefox 35.0 et versions ultérieures
Mikko Rantalainen
1
JUst mis à jour en FF 35, et il fonctionne sans préfixe
Aamir Mahmood
1
@EdwardBlack Je ne pense pas que ce soit un problème mais pour avoir un flou permanent, vous devrez recourir à des outils d'édition d'images. L'autre moyen pourrait être d'avoir une sorte de capture d'image à l'aide du navigateur phantomJS / headless webkit, puis de le servir, mais c'est un moyen fastidieux d'obtenir le même résultat.
Aniket
70

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.

Nécrone
la source
1
La limitation avec ceci est que vous ne pouvez pas manipuler de pseudo-éléments dans js. Si vous n'en avez pas besoin, c'est une bonne solution.
posit labs
6
Si vous n'aimez pas la bordure blanche floue, vous pouvez augmenter le widthet heightvers 110%puis ajouter un décalage de -5%vers topet leftde la content:beforeclasse.
Chad Fawcett
1
Cela fonctionne pour moi, mais je veux que cette image d'arrière-plan défile également lorsque l'utilisateur fait défiler la page. La position FIXE arrête cela. Comment se débarrasser de ce problème?
DEEPAN KUMAR
61

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.

hitautodestruct
la source
5
Même si cela ne fonctionne pas dans tous les navigateurs, vous obtenez mon vote pour avoir fourni la méthode non-piratée spéc-correcte pour le faire.
MrMesees
AFAIK c'est une fonctionnalité non standard, il n'y a donc aucune spécification pour cela.
Vitim.us
3
LA TÊTE HAUTE! En 2018, le support du navigateur a considérablement diminué pour cela! Non pris en charge dans Edge, Firefox ou Chrome.
protoEvangelion
@protoEvangelion Semble qu'il sera disponible dans Edge 16+, et je ne vois aucun autre navigateur dire qu'il ne l'implémentera pas. Des faits pour étayer ces affirmations?
hitautodestruct
@hitautodestruct Selon caniuse.com IE, Edge 16, Firefox et Chrome ne le prennent pas en charge par défaut pour le moment. Vous avez raison de dire qu'Edge 17+ prend cela en charge. Merci d'avoir fait remarquer cela. En passant, une réponse
sympa
26

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.

laboratoires de posit
la source
7

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>

Sumitava Das
la source
5

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 */
}
a99
la source
Ça ne marche pas pour moi. Avez-vous un jsfiddle fonctionnel?
Matt
2

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

saikat
la source
1

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:

SharpC
la source
vous téléchargez 2 images
Ced
1

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

blurWhatEverYouWantInPixels»);"

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>

codeWithMe
la source
1

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

Max Tusken
la source
Y a-t-il des façons simples de faire fonctionner cela localhostpendant les tests?
Jonathan
La quantité de flou pour une image à grande résolution est beaucoup trop subtile, comment puis-je augmenter considérablement la quantité de flou sans que cela ait l'air polyédrique? La largeur aide un peu, mais elle semble trop polyédrique si je brouille trop
Jonathan
0

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

Jonathan
la source
0

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

loremine de prajeesh
la source
0

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>

Harsha Alva
la source
0

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;
      }
Eljeddi Oussema
la source
0
$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);
    }
}
Carlos Boyzo
la source
1
Ajouter une explication à votre réponse serait formidable.
Arvind Maurya
Whit Sass j'ai mis le code suivant, et j'ai peint tous les articles sur le corps, peut avoir demandé de l'aide pour avoir seulement une image sur le fond du corps ????? $ fondo: url (/grid/assets/img/backimage.png); {rembourrage: 0; marge: 0; } body {:: before {content: ""; hauteur: 1008px; largeur: 100%; affichage: flex; position: absolue; image de fond: $ fondo; background-repeat: pas de répétition; position de fond: centre; taille du fond: couverture; filtre: flou (1,6rem); }}
Carlos Boyzo le
0

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>

constructeurs de code
la source
-6

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!

user7226407
la source
4
ne répond pas à la question
gorn