使用 CSS 对图像进行着色而不叠加

Question

是否可以在 WebKit 浏览器中使用 CSS 将图像着色为特定颜色而无需覆盖？

尝试失败

• 已设法使用 hue-rotate 将图像着色为棕褐色或任意颜色，但找不到使用特定颜色着色的方法。
• 创建“色调”SVG 过滤器并使用 -webkit-filter: url(#tint) 调用它在 Chrome 上不起作用。
• opacity/box-shadow css 属性与drop-shadow/opacity 过滤器的所有可能组合都不会产生所需的效果。

想法

• 给定一种颜色，是否可以组合 HSB 滤镜（hue-rotate、saturation、brightness）来生成其色调？

Answer 1

最终会使用着色器。请参阅有关过滤器的 W3C 文档。

目前，例如：

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

见

• 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

更新：

Adobe 发布了基于 HTML5 的 CSS Filter Labs，在支持的浏览器上支持 custom filters（着色器）：

Answer 2

虽然没有独立的色调过滤器，但您可以通过组合现有过滤器来制作一种不带阴影的过滤器。

结合棕褐色来统一颜色，然后色调旋转到你想要的颜色

-webkit-filter: sepia(90%) hue-rotate(90deg);

我使用带有 alpha 值的边框作为我的色调，它实际上是一个叠加层，但不使用任何额外的 DOM 元素，从而在其他浏览器获得这些过滤器时更简单地过渡到棕褐色+hue-rotate。

Answer 3

那么垫底怎么样？

HTML：

<span class="tint"><img src="..." /></span>

CSS：

.tint { background-color:red; display:inline-block; }
.tint img { opacity:0.8 }

根据需要调整颜色和不透明度。不适用于具有透明度的图像。

Answer 4

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

任何颜色的色调（而不是并非所有地方都支持的棕褐色或旋转滤镜）可以通过适当大小的插入框阴影来实现。

Answer 5

今天使用 SVG 过滤器可以实现这一点，而无需使用着色器。您可以通过 -webkit-filter: "url(#yourfilterID)" 等语法将其用作 CSS 过滤器（尽管它在 IE 中不起作用）。

<svg width="800px" height="600px" viewbox="0 0 800 600">
    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
        <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                                                            .2 .2 .2 0 0 
                                                            .0 .0 .0 0 0 
                                                             0    0   0 1 0"/>
        </filter>     
    </defs>

 <image x="0" y="0" width="550" height="370" preserveAspectRatio="true"
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/>
</svg>

http://codepen.io/mullany/details/baLkH/ 的动态演示