Opacity vs CSS Filter

When we place text on images we are always faced with the problem of readability.

I often play with the opacity to correct this problem. And there is the CSS Filter property and its many effects.

By default I think that the latter offers a more qualitative rendering than opacity. But I want to be clear about it.

With opacity

It’s easy. We add a background color to the parent element and play with the opacity property of the image.

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

.element-image {
  opacity: 0.7;
}

With CSS Filter

The filter property allows you to apply filters or graphic effects.
This property offers the following filters: blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate and sepia.

The filter that interests me here is brightness.
It's even easier than opacity. We apply the filter property to the image element.

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

The result

I made a codepen to compare.
On the left the opacity version and on the right the filter version.
Result of the races, I don't see any difference!

So if you are wondering which solution to use, I tell you it's like voulvoul. The one that suits you best.

The above is the detailed content of Opacity vs CSS Filter. For more information, please follow other related articles on the PHP Chinese website!