CSS 过滤器作为一个图像的颜色修饰符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17357125/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Filter as a color modifier for one image
提问by Mateus Leon
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.
是否可以使用 HueRotate、Saturation 和 Brightness 等 CSS 过滤器方法更改绘制为全白的 PNG 的颜色？类似于 Photoshop 的颜色叠加效果，但在 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.
这将是一个很好的解决方案，可以避免创建大量仅更改颜色的图像。例如，一组具有深色和浅色 UI 版本的图标。
回答by Ciantic
You can also colorize white images by adding sepia and then some saturation, hue-rotation, e.g. in CSS:
您还可以通过添加棕褐色，然后添加一些饱和度、色调旋转来为白色图像着色，例如在 CSS 中：
filter: sepia() saturate(10000%) hue-rotate(30deg)
filter: sepia() saturate(10000%) hue-rotate(30deg)
This should make white image as green image.
这应该使白色图像成为绿色图像。
回答by xRavisher
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%)
sepia(100%)
I have tried the following css style on a solid colour image, whose base color is #ccc
我在纯色图像上尝试了以下 css 样式，其基色是 #ccc
sepia(100%) contrast(50%) saturate(500%) hue-rotate(423deg)
I was able to change the image colour to a lime green.
我能够将图像颜色更改为柠檬绿色。
Enjoy ;)
享受;)
回答by bitfiddler
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:
这是一个很酷的主意，但它不适用于您建议的白色图像。你可以用彩色图像来做，但如果它全是白色的就不行。我在 Safari 中使用 CSS 过滤器的 webkit 版本尝试了以下操作：
<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.
我得到一个红色的盒子。这是因为过滤器对不存在于白色或黑色的色调值起作用。
回答by j0sh1e
Try making brightnessgreater 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.
尝试使brightness大于100%. 您会注意到，当您在 上方移动得更远时，图像将开始淡化为白色100%。图像的暗度将决定100%您需要移动多远。
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).
请记住，只有 Google Canary 用户才能看到 CSS3 过滤器，并且 CSS3 过滤器不会影响任何其他浏览器中的图像。（至少到目前为止）。
