CSS: superposer du texte lisible sur une image de fond

Il est souvent utile de pouvoir placer du texte sur une image de fond, de manière à ce que l’on puisse lire le texte facilement et distinguer l’image. C’est ce que j’utilise sur le blog pour les images d’illustration des articles.

Nous allons donc superposer du texte lisible sur une image de fond en utilisant uniquement du code HTML et CSS, ce qui nous donne ceci:

Vous souhaitez accomplir la même chose? Voici comment faire.

Commençons par le code HTML:

<div class="hero">
	<h1>Voici une planche à voile</h1>
	<p>Une image de planche à voile se trouve derrière ce texte.</p>
</div>Code language: HTML, XML (xml)

Et voici le code CSS:

.hero {
  background-color: #000000;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://images.unsplash.com/photo-1518810370118-0fde40f8b0f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2089&q=80);
  background-position: center;
  background-size: cover;
  color: #ffffff;
  padding: 1em;
  text-align: center;
}Code language: CSS (css)

Le secret réside dans l’image en filigrane noir qui se trouve au dessus de l’image, sous notre texte. Lorsque l’on utilise plusieurs propriétés background-image, elles se superposent, avec la première propriété au dessus des autres.

Nous ajoutons également un linear-gradient à notre background-image. Nous utilison la fonction rgba() pour notre déclaration de couleur, avec 0, 0, 0 pour obtenir du noir.

Ensuite nous utilisons 0.6 comment coefficient alpha – c’est-à-dire le coefficient de transparence, plus il est proche de 0 et plus il est transparent, plus il est proche de 1 et plus il est sombre.

Et voilà, vous obtenez un texte lisible superposé sur une image légérement assombrie pour améliorer le contraste.