DEV Community

Cover image for Opacité vs CSS Filter
Paul Fleury
Paul Fleury

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)