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

Question

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

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

Je souhaite appliquer un filtre de flou CSS 3 seulement à 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-image dans mon CSS, il stylise toute la page, plutôt que seulement l'arrière-plan.Existe-t-il un moyen de sélectionner uniquement l'image et d'y appliquer le filtre ?Alternativement, existe-t-il un moyen de simplement désactiver le flou pour tous les autres éléments de la page ?

Answer 1

Regarde ça stylo.

Vous devrez utiliser deux conteneurs différents, 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.

Tous deux sont placés avec position: fixed et left: 0; right: 0;.La différence dans leur affichage vient du z-index valeurs 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 Lorem Ipsum Texte.

Mise à jour

Grâce à Matthieu Wilcoxson pour une meilleure mise en œuvre en utilisant .content:before http://codepen.io/akademy/pen/FlkzB

Answer 2

stylo

Supprimer 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 d'autres solutions.

Réalisé en utilisant

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

Un débordement automatique est nécessaire, sinon l'arrière-plan sera décalé de quelques pixels en haut.

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

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

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

Answer 3

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 pouvant ê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 il est actuellement pris en charge dans Chrome 76, Bord, Safari et iOS Safari (voir caniuse.com pour les statistiques).

Depuis Documents de développement Mozilla:

La propriété background-filter 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/opacité de l'élément.

Voir caniuse.com pour les statistiques d'utilisation.

Vous l'utiliseriez comme ceci :

.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-filter activé par défaut dans la version 76 qui doit sortir le 30/07/2019.

Mise à jour (01/06/2019):L'équipe Mozzilla Firefox a annoncé il commencera bientôt à travailler sur sa mise en œuvre.

Mise à jour (21/05/2019):Chrome Vient d'être annoncé backdrop-filter est disponible dans Chrome Canary sans activer l'indicateur « Activer les fonctionnalités expérimentales de la plate-forme Web ».Cela signifie backdrop-filter est sur le point d'être implémenté sur toutes les plateformes Chrome.

Answer 4

Vous devez ré-structurer votre HTML afin de le faire.Vous devez brouiller l'élément entier afin de brouiller le fond.Donc, si vous voulez seulement brouiller le fond, ce doit être son propre élément.

Answer 5

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>