How to change image colors using CSS3?

Question

It works:

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

And this is not so:

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

Is there something like img { opacity: 1 }that that allows to determine the hsl values ​​for an image?

Answer 1

Text and images are two different things.

The text is displayed by the browser with the settings that you provide (decoration, font size, size ...)

the image is rendered differently. the browser does not have information about what is on the image, and may not change it.

Settings, such as color, etc., will not affect the image.

By the way, the color parameter determines the color of the text.

: "" , div , div div . , .

Answer 2

: Firefox SVG- HTML CSS, Chrome, Safari Opera SVG, , , Opera. , .

Answer 3

( " "):

.colors{ filter: hue-rotate(90deg); }

<img src="http://lorempixel.com/300/150/" heigh=150 >

<img src="http://lorempixel.com/300/150/" heigh=150 class="colors" >

Hide result

0 360.

W3Schools.com: CSS-

Answer 4

color , .. .

, , - : .

opacity , .

Answer 5

css - opacity -. , () , if. , , , 0,5.

Answer 6

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Maybe this filter will help you change one image in different colors, but they also have a browser compatibility issue.