Question

This works:

a { color: hsla(0,100%,50%,0.2) }

And this does not:

img { color: hsla(0,100%,50%,0.2) }

Is there something like img { opacity: 1 } that allows to define hsl values to an image?

Answer 1

Text and images are 2 different things.

Text is rendered by the browser with the settings you provide (decoration, size font color …)

an image is rendered in another way. the browser does not have information about what is on the image, and can therefor not alter the image itself.

Parameters like color etc will not have effect on the image.

By the way, the color parameter defines the text color.

Edit: If you want to apply a “color” to an image, you could create a div with a background image, and then in that div another div with a background color and an opacity. that way the transparant color will be overlayed on the image.