web-dev-qa-db-fra.com

Comment ajouter une superposition de couleurs à une image d'arrière-plan?

J'ai souvent vu cette question à la fois sur SO et sur le Web. Mais aucun d'entre eux n'a été ce que je cherche.

Comment ajouter une superposition de couleurs à une image d'arrière-plan en utilisant uniquement CSS?

Exemple HTML:

<div class="testclass">
</div>

Exemple CSS:

.testclass {
    background-image: url("../img/img.jpg");
}

Notez s'il vous plaît:

  • Je veux résoudre ce problème en utilisant uniquement CSS. Je ne veux PAS ajouter une div enfant dans la "classe de test" de la div pour la superposition de couleurs.

  • Cela ne devrait pas être un "effet de survol". Je veux simplement ajouter une surimpression de couleur à l'image d'arrière-plan.

  • Je veux pouvoir utiliser l'opacité, c'est-à-dire que je recherche une solution permettant la couleur RGBA.

  • Je cherche juste une couleur, disons noir. Pas un dégradé.

Est-ce possible? (Je serais surpris sinon, mais je n'ai rien trouvé à ce sujet), et si oui, quel est le meilleur moyen d'y parvenir?

Toutes les suggestions et conseils sont appréciés!

cssbackground-imagebackground-color
43
Alex

Je vois 2 options faciles:

  • fond multiple avec un seul dégradé translucide sur l'image
  • hudge ombre incrustée

option de dégradé:

html {
  min-height:100%;
  background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  }

option d'ombre:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3);
  }

un vieux codepen du mien avec peu d'exemples

une troisième option

  • avec background-blen-mode :

    La propriété CSS background-blend-mode CSS définit la manière dont les images d'arrière-plan d'un élément doivent se fondre les unes dans les autres et avec la couleur d'arrière-plan de l'élément.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255,0,150,0.3);
  background-size:cover;
  background-blend-mode: multiply;
  }
106
G-Cyr

Vous pouvez utiliser un pseudo-élément pour créer la superposition.

.testclass {
  background-image: url("../img/img.jpg");
  position: relative;
}
.testclass:before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  background: rgba(0,0,0,.5);
}
25
Stickers

background-image prend plusieurs valeurs.

donc une combinaison d'un seul dégradé linéaire de couleur et de css blend modes fera l'affaire.

.testclass {
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}

notez qu'il n'y a aucune prise en charge sur IE/Edge pour les modes de fusion CSS.

12
Uzi

Essayez ceci, c'est simple et clair. Je l'ai trouvé à partir d'ici: https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image {

  width: 300px;
  height: 200px;

  background: 
    /* top, transparent red */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg);
}
3
Udara