[英]how to desaturate background image of a div using css?
我看到这么多的插件去了一个图像去饱和 标签。
但我没有找到任何去饱和背景图像的东西,(一个用作元素背景的图像(div)。
有没有办法在悬停时使用2个背景去饱和背景图像(即图像精灵一个是B&W,另一个是颜色)
我可以使用Image Sprites做这样的事情。
// Initially color Image
$(<element>).mouseover(function(e){
jQuery(this).children(":first").stop().animate(
{
'background-position': <some coordinates>
// Coordinates of b&w Image
},
100
);
e.stopPropagation();
})
.mouseout(function(e){
jQuery(this).children(":first").stop().animate(
{
'background-position': <some coordinates>
// Coordinates of color Image
},
100,
settings.easingType
);
e.stopPropagation();
});
但我不想要这个。 我想要飞行中的饱和背景图像。 请帮忙。
看看这个页面http://davidwalsh.name/css-filters 。 它解释了一些过滤方法(webkit浏览器)。
也许你应该更好地使用canvas(更好的浏览器支持)或最好的服务器本身,例如使用php。
element: hover{
filter: url(~"data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
}
这是相关的问题,希望有人需要重定向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.