知识储备
1.CSS3 filter
下面的链接上有关于几种常见滤镜的介绍
2.mix-blend-mode 混合模式/background-blend-mode
看看张鑫旭的这篇文章
http://www.zhangxinxu.com/wordpress/2015/05/css3-mix-blend-mode-background-blend-mode/
在大致了解需要用到的知识后，我们来给图片上个颜色
个人认为这个功能不太适合做的太花哨，还是喜欢简约风格
小测试
效果：
原图
使用 怀旧/饱和度/色相 等滤镜
可能大家觉得这个效果并不适合自己的风格，可以尝试改下色相等属性
示例代码
html
<img src="锥头螳螂.jpg">
css
width: 400px;
-webkit-filter: sepia() saturate(1.5) hue-rotate(295deg);
filter: sepia() saturate(1.5) hue-rotate(295deg);
Tips:记得为不同浏览器加上前缀
这个方法的不足之处就是看起来有点褪色，不断调试饱和度也看起来有不同（第一张）
对比（第一张是filter/第二张用了混合模式）
混合模式
1.第一种方法
第一种方法里我们在Image外面套用一层div,目的是为了设置一层背景色
html
<div class="image">
<img src="锥头螳螂.jpg">
</div>
css
.image{
width: 400px;
margin: 0 auto;
background: hsl(335, 100%, 10%);
}
.image>img{
width: 100%;
mix-blend-mode: luminosity;
}
在img里我们设置下方的背景或颜色来混合整个元素
mix-blend-mode: luminosity;
2.第二种方法
html
<div style="background-image: url('锥头螳螂.jpg')"></div>
css
.image{
width: 400px;
height: 270px;
margin: 0 auto;
background-size: cover;
background-color: hsl(270, 1%, 19%);
background-blend-mode: luminosity;
transition: .8s background-color;
}
.image:hover{
background-color: transparent;
}
在这里我们将图片放置在了div背景中，导致这个方法的一个不足（必须设置div的大小，因为背景图片无法撑开容器）
关键的一步：设置
background-color: hsl(270, 1%, 19%);
background-blend-mode: luminosity;
到此我们已经完成了上图的效果。作者在这里添加了一些变化，为其设置了hover过渡动画
当我们移到图片上方时，图片将显示其真正的颜色，
从一开始
灰色风格
过渡到
原色
给人视觉上的冲击，效果还是不错的哦
总结：如果在一些用户提示上用到这种效果还是灰常好的！！例如一些不可点击的图片。
