Opacité vs CSS Filter

Quand on place du texte sur image on est toujours confronté au problème de la lisibilité.

Je joue souvent avec l’opacité pour corriger ce problème. Et il y a la propriété CSS Filter et ses nombreux effets.

Par défaut je pense que cette propriété propose un rendu plus qualitatif que l’opacité. Mais je veux en avoir le cœur net.

Avec l’opacité

C’est facile. On ajoute une couleur de fond à l’élément parent et on joue avec l’opacité de l’image

.element-parent {
	background-color: #000;
}

.element-image {
	opacity: 0.7;
}

Avec CSS Filter

La propriété filter permet d’appliquer des filtres ou des effets graphiques. Cette propriété propose les filtres suivants : blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate et sepia.

Le filtre qui m’intéresse ici c’est brightness. C’est encore plus facile que l’opactié. On applique la propriété filter à l’élément image.

.element-image {
	filter: brightness(0.7);
}

Le résultat

J’ai fait un codepen pour comparer et … je ne vois pas de différence !

Si je dois conclure, je vais vous dire d’utiliser ce qui vous convient le mieux. Opacité ou filter: brightness, difficile de voir la différence.