Superposer un dégradé en CSS : teinter et assombrir une image

Le dégradé sur une image en CSS le plus simple est un arrière-plan en calques : background-image: linear-gradient(rgb(2 6 23 / 0.6), rgb(2 6 23 / 0)), url(photo.jpg). Les calques listés en premier sont dessinés au-dessus : le dégradé recouvre donc la photo. Quand l’image est un élément <img>, placez plutôt le dégradé sur un pseudo-élément, et quand vous voulez que la couleur teinte la photo au lieu de la couvrir, ajoutez un mode de fusion. Chaque méthode convient à un usage différent.

Méthode 1 : un arrière-plan en calques

background-image accepte une liste séparée par des virgules. La première valeur est le calque du dessus. Dégradés et images se mélangent librement, et chaque calque peut avoir sa propre taille et sa position si vous listez ces propriétés dans le même ordre. C’est le bon choix pour les images décoratives qui n’ont pas besoin de texte alternatif.

.banner {
  background-color: #0f172a; /* shows until the photo loads */
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.9) 0%, rgb(15 23 42 / 0.6) 40%, rgb(15 23 42 / 0) 70%),
    url("/images/workshop.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Les bandeaux en haut et en bas conviennent aux galeries avec un titre en haut et un crédit en bas. Le vignettage attire l’œil vers le centre sans porter de texte. La teinte de marque donne un rendu affirmé aux pages d’équipe et aux bannières d’événement ; les voiles en dégradé explique quand chacun convient du point de vue du design.

Méthode 2 : un pseudo-élément sur un img

Les images de contenu ont leur place dans des éléments <img> : elles bénéficient d’un texte alternatif, d’un srcset adaptatif, du chargement différé et d’une découverte précoce par le navigateur. Un dégradé d’arrière-plan ne peut pas passer au-dessus d’un <img> : enveloppez-le et placez le dégradé sur le pseudo-élément du conteneur.

<figure class="overlay">
  <img src="/images/harbour.jpg" alt="Fishing boats moored in a small harbour at dusk"
       width="1920" height="1080" fetchpriority="high">
  <figcaption>Harbour Days, 14 to 16 June</figcaption>
</figure>

.overlay {
  position: relative;
  margin: 0;
  isolation: isolate;
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(2 6 23 / 0.75), rgb(2 6 23 / 0) 60%);
  pointer-events: none;
  transition: opacity 250ms ease-out;
}

.overlay figcaption {
  position: absolute;
  inset: auto 1.5rem 1.5rem;
  z-index: 1;
  color: #f8fafc;
}

.overlay:hover::after { opacity: 0.6; }

Pour une image d’en-tête qui est le plus grand élément à l’écran, la seconde méthode l’emporte en général en vitesse de chargement. Optimiser les images pour le web explique pourquoi le navigateur trouve les éléments <img> plus tôt que les arrière-plans CSS.

Méthode 3 : les modes de fusion pour les lavis de couleur

Un voile simple se pose sur la photo comme un verre teinté. Un mode de fusion mêle le dégradé aux clairs et aux sombres de la photo elle-même, comme si elle avait été prise dans cette couleur. Utilisez background-blend-mode pour les arrière-plans en calques et mix-blend-mode sur un pseudo-élément au-dessus d’un <img>.

/* Duotone wash on a layered background */
.duotone {
  background-image:
    linear-gradient(135deg, #1e1b4b 0%, #f472b6 100%),
    url("/images/portrait.jpg");
  background-size: cover;
  background-blend-mode: color;
}

/* The same idea over an img element */
.overlay--wash::after {
  background: linear-gradient(135deg, #1e1b4b, #f472b6);
  mix-blend-mode: color;
}

La technique complète, y compris le choix des deux couleurs, se trouve dans l’effet bichromie.

Des voiles qui gardent le texte lisible

L’erreur la plus courante est un film sombre uniforme sur toute la photo, par exemple du noir à 50 %. Il ternit l’image partout et peut ne pas être assez sombre derrière les mots. Donnez plutôt une forme au voile : le plus sombre sous le texte, transparent là où la photo compte.

1. 1

   Décidez où vont les mots

   En bas à gauche pour les légendes, dans le tiers gauche pour le texte d’en-tête, au centre pour une seule ligne.

2. 2

   Orientez le dégradé vers eux

   Utilisez to top pour un texte en bas, to right pour un texte à gauche, ou un dégradé radial centré sur les mots.

3. 3

   Arrêtez-vous tôt

   Atteignez la transparence totale vers 60 à 70 % pour que l’essentiel de la photo reste intact.

4. 4

   Vérifiez le pire cas

   Mesurez le contraste là où la photo est la plus claire derrière une lettre. Contraste des couleurs et accessibilité donne les rapports.

Des voiles adoucis à nombreux arrêts paraissent plus fluides qu’un fondu à deux arrêts ; la méthode se trouve dans les dégradés transparents en CSS.

Des voiles sans tâtonnement

Sur un site web, vous réglez chaque voile à la main. Pour les publications sociales, les bannières et les diapositives, Gradiently saute cette étape : un Mark sait où se trouvent vos mots et approfondit ou éclaircit ses propres couleurs derrière eux, les photos peuvent être teintées dans les couleurs du Mark en monochrome, en bichromie ou en lavis, et avec Pro la création se redimensionne vers tous les formats en une fois, sans voile à retravailler.