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 dernière 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 la propriété opacity 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’opacité. 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.
A gauche la version opacity et à droite la version filter.
Résultat des courses, je ne vois pas de différence !

Alors si vous vous demandez quelle solution utiliser, je vous dit c'est comme voulvoul. Celle qui vous convient le mieux.