CSS Filter as a color modifier for one image

我的梦境 提交于 2019-12-18 11:45:59

问题


Is it possible to change, with the CSS Filter methods like HueRotate, Saturation, and Brightness, the color of a PNG drawn totally white? Like Photoshop's color overlay effect, but in CSS.

This would be a good solution to avoid creating lots of images that change only color. For example, a set of icons that have dark and light versions for a UI.


回答1:


You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:

filter: sepia() saturate(10000%) hue-rotate(30deg)

This should make white image as green image.

http://jsbin.com/xetefa/1/edit




回答2:


This is a cool idea, but it will not work with a white image as you suggest. You can do it with a colored image, but not if it's all white. I tried the following in Safari using the webkit version of the CSS filter:

<div style="background-color:#FFF; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

But the box stays white. If I switch the color to blue like this:

<div style="background-color:#00F; -webkit-filter: hue-rotate(90deg); width:100px; height:100px; border:1px solid #000;"></div>

I get a red box. This is because the filter works on the hue value which is not present in white or black.




回答3:


Actually there thankfully is a way!

The main difficulty here as mentioned before is that there is essentially no colour in a greyscale image. Thankfully there is a filter which can pump in some colour!

sepia(100%)

I have tried the following css style on a solid colour image, whose base color is #ccc

sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)

I was able to change the image colour to a lime green.

Enjoy ;)




回答4:


Try making brightness greater than 100%. You'll notice the image will start to fade to white as you move farther above 100%. The darkness of an image will determine how far from 100% that you need to move.

img {

      -webkit-filter: brightness(1000%);

}

Remember that only Google Canary users can see CSS3 Filters and that CSS3 Filters do not affect the image in any other browser. (thus far at least).



来源:https://stackoverflow.com/questions/17357125/css-filter-as-a-color-modifier-for-one-image

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!