CODEWITHSUNDEEP
htmlcss
kalyanji
kalyanji

Reputation: 75

How can the colors of an image be changed using CSS3?

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?

Upvotes: 5

Views: 9346

Answers (6)

TheArtOF
TheArtOF

Reputation: 11

This works (press 'run code snippet' multi times):

.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" >

degree is 0 to 360.

W3Schools.com: CSS filter Property

Upvotes: 1

Nealv
Nealv

Reputation: 6884

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.

Upvotes: 11

Manish Sharma
Manish Sharma

Reputation: 1720

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

may be these filter help you to change a single image in different color sachem but they also have browser compatibility issue

Upvotes: 0

robertc
robertc

Reputation: 75777

You can apply filters to images in some browsers: Firefox allows you to apply SVG filters to HTML content from CSS, but Chrome, Safari and Opera you'll need to wrap your content in SVG to apply filters to them, here's an example that works in Opera. There might not be an appropriate SVG filter for what you need, but it may be an avenue worth exploring if you have no other alternatives.

In Internet Explorer you might be able to use a static filter.

Upvotes: 1

grddev
grddev

Reputation: 2852

The only way to impact the colors of an image with css is to use opacity to control the alpha channel. Note that you could make a hack to (sort of) change the luminance of your image by placing another element on top of if. Ensure that it covers the image exactly by adjusting position and size, make the background-color black, and set the opacity to 0.5.

Upvotes: 0

Pekka
Pekka

Reputation: 449823

The color attribute is used as the drawing colour for text characters, borders and such. It does not apply to bitmap images.

Therefore, it doesn't matter whether you add alpha channel information to your colour value or not: The whole of the declaration doesn't apply.

opacity is different, because it specifies the alpha value for the whole element.

Upvotes: 0

Related Questions