专注前端,专注网页设计制作 - (网页制作/模板制作/设计) QQ:755150799 织梦模板 | 网页特效 | 网站模板 | 建站教程 | TOP排行榜 | Tag标签 | 联系我们
当前位置: 网站首页 > 建站教程 > Div+Css教程 > >

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

时间:2014-09-12来源:学技巧网站制作 作者:欲思 阅读: 次 【 点评一下

昨天看到一个不错的CSS3代码,几行代码就可以实现图片的黑白效果。感觉这个效果和代码都很不错,就分享给大家。觉得不错的可以收藏起来。原图如下:

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

添加CSS3代码样式之后的黑白效果图如下:

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

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

  1. img.desaturate {

  2. filter: grayscale(100%);

  3. -webkit-filter: grayscale(100%);

  4. -moz-filter: grayscale(100%);

  5. -ms-filter: grayscale(100%);

  6. -o-filter: grayscale(100%);

  7. }

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

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


分享到:
  • 用微信  “扫一扫”

    将文章分享到朋友圈。

    关注公众号:xue-jiqiao

本文版权归原作者所有,转载请注明原文来源出处,学技巧网站制作感谢您的支持!