使用 CSS 为图像着色而不叠加
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12546499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Tint image using CSS without overlay
提问by hpique
Is it possible to tint an image with a specific color using CSS without an overlay in a WebKit browser?
是否可以在 WebKit 浏览器中使用 CSS 为图像着色而无需覆盖？
Failed attempts
失败的尝试
- Managed to tint the image sepia or an arbitrary color using
hue-rotatebut 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-shadowcss properties withdrop-shadow/opacityfilters don't generate the desired effect.
- 设法使用棕褐色或任意颜色为图像着色，
hue-rotate但找不到用特定颜色着色的方法。 - 创建“色调”SVG 过滤器并调用它
-webkit-filter: url(#tint)在 Chrome 上不起作用。 opacity/box-shadowcss 属性与drop-shadow/opacity过滤器的所有可能组合都不会产生所需的效果。
Ideas
想法
- Given a color, wouldn't it be possible to combine the HSB filters (
hue-rotate,saturation,brightness) to generate its tint?
- 给定一种颜色，是否可以组合 HSB 过滤器 (
hue-rotate,saturation,brightness) 来生成其色调？
采纳答案by Lorenz Lo Sauer
Eventually it will be, using shaders. See the W3C Docs on Filters.
最终将是，使用着色器。请参阅有关过滤器的 W3C 文档。
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:
更新：
Adobereleased its HTML5 based CSS Filter Labswith support for custom filters(Shaders) on supported browsers:
Adobe发布了基于 HTML5 的CSS 过滤器实验室，支持在支持的浏览器上自定义过滤器（着色器）：
回答by krs
While there are no stand alone tint filter you can make kind of one by composition of existing filters without shading.
虽然没有独立的色调过滤器，但您可以通过组合现有的过滤器来制作一种没有阴影的颜色。
Combine sepia to unify the color, then hue-rotate to the color you want it to be tinted with
结合棕褐色以统一颜色，然后将色调旋转到您想要着色的颜色
-webkit-filter: sepia(90%) hue-rotate(90deg);
I use borders with an alpha value for my tints, its really an overlay but doesn't use any extra DOM elements making the transition to sepia+hue-rotate simpler when the other browsers get those filters.
我为我的色调使用带有 alpha 值的边框，它确实是一个叠加层，但不使用任何额外的 DOM 元素，当其他浏览器获得这些过滤器时，它可以更轻松地过渡到棕褐色+色调旋转。
回答by Michael Mullany
This is possible using an SVG filter today without having to use shaders. You can use this as a CSS filter (although it won't work in IE) through the -webkit-filter: "url(#yourfilterID)" etc. syntax.
这在今天使用 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>
Dynamic demo at http://codepen.io/mullany/details/baLkH/
回答by Frevd
box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;
box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;
A tint in any color (rather than sepia or rotation filters which aren't supported everywhere) could be achieved by an inset box-shadow, in the appropriate size.
任何颜色的色调（而不是任何地方都不支持的棕褐色或旋转过滤器）可以通过适当大小的插入框阴影来实现。
回答by DanMan
How about an underlay then?
那么打底呢？
HTML:
HTML：
<span class="tint"><img src="..." /></span>
CSS:
CSS：
.tint { background-color:red; display:inline-block; }
.tint img { opacity:0.8 }
Tweak the color and opacity as you wish. Doesn't really work on images with transparency in them.
根据需要调整颜色和不透明度。不适用于具有透明度的图像。
