Question

是否可以使用CSS在WebKit浏览器中使用没有叠加层的特定颜色图像？

尝试失败

使用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%);

参见

<强>更新：

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

enter image description here

Answer 2

今天可以使用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 3

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

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

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

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

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 }

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

使用CSS而不覆盖的色调图像

5 个答案: