CSS过滤器作为一个图像的颜色修饰符
有没有可能使用HueRotate、Saturation和Brightness等CSS滤镜方法改变PNG的颜色，使其完全变成白色？像Photoshop的颜色叠加效果，但是在CSS里。
这将是一个很好的解决方案，可以避免创建大量只改变颜色的图像。例如，一组具有UI的深色和浅色版本的图标。
共有3个答案
其实谢天谢地，有一条路！
如前所述，这里的主要困难是在灰度图像中基本上没有颜色。谢天谢地，有一个过滤器，可以泵入一些颜色！
乌贼墨（100%）
我在纯色图像上尝试了以下css样式，其基色为#ccc
sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)
我可以把图像的颜色改成橙绿色。
享受;)
这是一个很酷的想法，但是它不适用于你建议的白色图像。你可以用彩色图像来做，但是如果全是白色就不行了。我在Safari使用了webkit版本的CSS过滤器，尝试了以下操作：
<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>
我得到了一个红色的框。这是因为过滤器对色调值起作用，而色调值不是白色或黑色。
您还可以通过添加阴影，然后添加一些饱和度，色调旋转来着色白色图像，例如在CSS中：
过滤器：sepia（）饱和（10000%）色调旋转（30deg）
这将使白色图像成为绿色图像。
http://jsbin.com/xetefa/1/edit
-
问题内容： 给定透明的PNG以白色显示简单形状，是否有可能通过CSS更改其颜色？某种覆盖还是什么？ 问题答案： 您可以将筛选器与和一起使用：筛选器相对于浏览器而言是较新的，但根据以下CanIUse表，超过90％的浏览器均支持它们 您可以将图像更改为灰度，棕褐色等（请看示例）。 因此，您现在可以使用滤镜更改PNG文件的颜色。
-
我注意到在具有透明背景的图像上使用CSS颜色变换会产生意想不到的效果。下面是一个示例： 总而言之，问题是这样的。如果将鼠标悬停在image div div的填充上，则此div的背景色和包含的image div以与预期相同的速率执行颜色转换。但是，如果将鼠标悬停在图像div上，其颜色的过渡速度似乎略快于图像div div的颜色。 鉴于我能够在Firefox、Chrome、Safari和Edge上重现
-
分析、api、re、web、功能测试、oasisengine、核心 分析sonar.sources=src/main analysis.sonar.tests=src/test analysis.sonar.binaries=target/classes analysis.sonar.junit.reportspath=target/surefire-reports analysis.sonar.
-
问题内容： 将SVG输出直接与页面代码内联放置，我能够像这样简单地用CSS修改填充颜色： 这很好用，但是我正在寻找一种方法，当它用作Background-IMAGE时，修改SVG的“填充”属性。 现在如何更改颜色？可能吗 作为参考，这是我的外部SVG文件的内容： 问题答案： 一种方法是从某种服务器端机制为svg提供服务。只需创建一个资源服务器端，即可根据GET参数输出svg，然后将其提供给某个网址
-
我的html文件中有以下svg图像： 现在，我试图改变颜色使用这个css代码： 然而，一切都没有改变。使用css更改svg图像路径颜色的正确方法是什么？谢谢
-
问题内容： 可以仅更改文本下面的线条颜色？我想看到类似红色字母的下面有一条蓝线的东西，但是我找不到如何完成它的方法。 问题答案： 您可以通过以下CSS规则作为示例： 如果较旧的浏览器不支持此规则，则可以使用以下解决方案： 用底线设置单词：