css3技巧之实现图片黑白效果

  • A+
所属分类:前端学习

分享一个CSS3代码,可以实现图片黑白效果。觉得不错的可以收藏起来。原图如下:
css3技巧之实现图片黑白效果
添加CSS3代码样式之后的黑白效果图如下:
css3技巧之实现图片黑白效果

是不是觉得整个风格色彩都不一样了呢。其实就是下面一小段代码实现的。利用img的CSS3属性几行代码就可以搞定。把下面的CSS代码添加到引用的CSS文件里即可实现。

	img.desaturate {
				filter: grayscale(100%);
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				-o-filter: grayscale(100%);
			}

如果你想要在所有的浏览器中实现这个视觉效果(假设你的访问者都支持 JavaScript)你可以使用 jQuery 或者 Greyscale.js 来修改你的图片,使其去色。

迷惘

发表评论

您必须登录才能发表评论!