CSS滤镜作为一个图像的颜色修改器

Question

是否可以通过CSS滤镜方法(如HueRotate,饱和度和亮度)进行更改,PNG的颜色是否为全白色？像Photoshop的颜色叠加效果,但在CSS中.

这将是一个很好的解决方案,可以避免创建大量只改变颜色的图像.例如,一组具有UI的深色和浅色版本的图标.

Answer 1

您还可以通过添加棕褐色然后一些饱和度,色调旋转(例如在CSS中)来着色白色图像:

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

这应该使白色图像成为绿色图像.

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

Answer 2

这是一个很酷的主意,但它不适用于您建议的白色图像.您可以使用彩色图像进行操作,但如果全部为白色则不能.我使用webkit版本的CSS过滤器在Safari中尝试了以下内容:

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

但盒子保持白色.如果我将颜色切换为蓝色,如下所示:

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

我拿到一个红色的盒子.这是因为滤镜适用于白色或黑色不存在的色调值.

Answer 3

其实谢天谢地是一种方式!

如前所述,主要困难在于灰度图像中基本上没有颜色.值得庆幸的是,有一个过滤器可以泵出一些颜色!

sepia(100%)

我在纯色图像上尝试了以下css样式,其基色是 #ccc

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

我能够将图像颜色更改为柠檬绿.

享受;)