最终它将是，使用 * 着色器 *。请参阅W3C文档中的过滤器。

目前，可能的情况是：

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

请参阅

• David Walsh on CSS Filters
• Stackoverflow: apply a rose tint...：
• W3C过滤效果1.0 Docs - 38.2.5.其他统一变量：CSS着色器参数
  更新：
• Adobe* 发布了基于HTML5的CSS Filter Labs，在支持的浏览器上支持custom filters（着色器）：

虽然没有独立的色调过滤器，你可以使一种由现有的过滤器的组成没有阴影。
合并棕褐色以统一颜色，然后色调旋转到您想要的颜色

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

我使用的边框与阿尔法值为我的色调，它实际上是一个覆盖，但不使用任何额外的DOM元素，使过渡到棕褐色+色调旋转更简单时，其他浏览器得到这些过滤器。

现在使用SVG过滤器就可以做到这一点，而不必使用着色器。您可以通过-webkit-filter将其用作CSS过滤器（尽管它在IE中不起作用）：“url（#您的过滤器ID）”等语法。

<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/上的动态演示

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

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

那垫个垫子怎么样？
于飞：

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

CSS：

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

调整颜色和不透明度，因为你希望。不真正工作的图像与透明度在他们。