在WebKit浏览器中,是否可以使用CSS将图像染上特定颜色而无需叠加层?
失败的尝试
- 使用
hue-rotate
可以将图像染成棕褐色或任意颜色,但找不到一种方法来用特定颜色染色。 - 创建一个“tint”SVG过滤器,并使用
-webkit-filter: url(#tint)
调用它,在Chrome上不起作用。 - 所有
opacity
/box-shadow
CSS属性与drop-shadow
/opacity
过滤器的可能组合都不能产生所需的效果。
想法
- 给定一个颜色,使用HSB过滤器(
hue-rotate
、saturation
、brightness
)进行组合,生成其带色。
-webkit-filter
有一个错别字。最好确认您的代码中没有犯同样的错误;-) - Spudleyfilter
CSS 样式最初只用于 SVG,但现在也适用于标准 HTML。我不确定哪些浏览器已经支持它,但如果您的目标浏览器已经实现了它,那么您就不需要再使用 SVG,直接将样式应用于<img>
HTML 标签即可。(请参见 http://caniuse.com/#feat=css-filters 以获取浏览器支持矩阵) - Spudley