CSS3实用技巧:几行代码实现图片黑白效果

HTML5+CSS3 欲思 3评论

昨天看到一个不错的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%);
}

注意:IE9兼容性不好可能会失效。网上有使用SVG 的滤镜效果来实现的。但是试了一下发现没有效果。所以最好在Google浏览器等现代浏览器下浏览页面。

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

转载请注明:欲思博客 » CSS3实用技巧:几行代码实现图片黑白效果

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (15)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 挺牛。
    书法时间2014-07-01 22:59 回复
  2. 看见图片我忍不住点了
    潇雨2014-06-11 23:24 回复