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

Question

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

失败的尝试

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

想法

• 给定一种颜色，难道不能结合 HSB 过滤器 ( hue-rotate, saturation, brightness) 来生成它的色调吗？

Answer 1

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

目前，可能的例如是：

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

看

• David Walsh 谈 CSS 过滤器
• Stackoverflow：应用玫瑰色...：
• W3C 滤镜效果 1.0 文档 - 38.2.5。其他统一变量：CSS 着色器参数

更新：

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

Answer 2

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

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

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

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

Answer 3

这在今天使用 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/上的动态演示

Answer 4

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

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

Answer 5

那么垫底呢？

HTML：

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

CSS：

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

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