使用 CSS 为图像着色而不叠加
问题描述：
是否可以在 WebKit 浏览器中使用 CSS 为图像着色而无需覆盖?
Is it possible to tint an image with a specific color using CSS without an overlay in a WebKit browser?
尝试失败
- 设法使用
hue-rotate为图像着色为棕褐色或任意颜色，但找不到使用特定颜色着色的方法. - 创建tint"SVG 过滤器并使用
-webkit-filter: url(#tint)调用它在 Chrome 上不起作用. -
opacity/box-shadowcss 属性与drop-shadow/opacity过滤器的所有可能组合不会产生预期的效果.
- Managed to tint the image sepia or an arbitrary color using
hue-rotatebut couldn't find a way to tint it with a specific color. - Creating a "tint" SVG filter and calling it with
-webkit-filter: url(#tint)doesn't work on Chrome. - All possible combinations of
opacity/box-shadowcss properties withdrop-shadow/opacityfilters don't generate the desired effect.
想法
- 给定一种颜色，是否可以结合 HSB 过滤器(
hue-rotate、saturation、brightness)来生成它的色调?
- Given a color, wouldn't it be possible to combine the HSB filters (
hue-rotate,saturation,brightness) to generate its tint?
答
最终会是这样，使用 着色器.请参阅有关过滤器的 W3C 文档.
Eventually it will be, using shaders. See the W3C Docs on Filters.
目前，例如可能的是:
-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%);
见
更新:
Adobe 发布了基于 HTML5 的 CSS Filter Labs在支持的浏览器上支持自定义过滤器(着色器):
Adobe released its HTML5 based CSS Filter Labs with support for custom filters (Shaders) on supported browsers: