Html
    Css
    Js

    
                        
 a {
	display:block;
	width:150px;
	height:150px;
	margin:50px auto;
	overflow:hidden;
}
a img {
	width:150px;
	height:150px;
	transition:2.5s filter;
	/*filter:none;
	*/
}
a {
	background:hsl(335,100%,50%);
}
img:hover {
	mix-blend-mode:luminosity;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css3图片染色

h:hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360s:saturation(饱和度)。取值为:0.0% - 100.0%l:lightness(亮度)。取值为:0.0% - 100.0%

0