使用CSS而不使用overlay的Tint图像 [英] Tint image using CSS without overlay

问题描述

是否可以在WebKit浏览器中使用CSS而不使用叠加层来使用特定颜色的图片？

尝试失败 p>

• 使用 hue-rotate 管理图像棕褐色或任意颜色，


• 创建一个tintSVG过滤器，并使用 -webkit-filter：url（#tint） 在Chrome上无法使用。


• opacity / box-shadow css属性与 drop-shadow / opacity 过滤器不生成

给定一个颜色，不可能组合HSB过滤器（ hue-rotate ，饱和，亮度）来生成其色调？ 请参阅过滤器上的W3C文档。

此时，可能的例子是：

  -webkit-filter：grayscale; / * sepia，hue-rotate，invert .... * / 
 -webkit-filter：brightness（50％）; 
   

请参阅

• David Walsh对CSS过滤器


• Stackoverflow：应用玫瑰色... ：


• W3C Filter Effects 1.0文档 - 38.2.5。其他统一变量：CSS着色器参数

更新：

发布了基于HTML5的 CSS过滤器实验室，支持在受支持的浏览器上自定义过滤器（着色器） p>

>

Is it possible to tint an image with a specific color using CSS without an overlay in a WebKit browser?

Failed attempts

• Managed to tint the image sepia or an arbitrary color using hue-rotate but 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-shadow css properties with drop-shadow/opacity filters don't generate the desired effect.

Ideas

• Given a color, wouldn't it be possible to combine the HSB filters (hue-rotate, saturation, brightness) to generate its tint?

解决方案

Eventually it will be, using shaders. See the W3C Docs on Filters.

At the moment, what is possible for instance is:

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%); 

See

• David Walsh on CSS Filters
• Stackoverflow: apply a rose tint...:
• W3C Filter Effects 1.0 Docs - 38.2.5. Other uniform variables: the CSS shaders parameters

Update:

Adobe released its HTML5 based CSS Filter Labs with support for custom filters (Shaders) on supported browsers:

这篇关于使用CSS而不使用overlay的Tint图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！