CSS 实现图片灰度效果 兼容各种浏览器
程序员文章站
2022-04-24 19:22:20
...
本章给大家介绍用CSS 实现图片灰度效果的方法, 兼容各种浏览器如360浏览器。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果。
方式1. IE滤镜
img { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } //标准写法 img { filter:Gray; } //简写
IE系列浏览器都支持IE滤镜的这一属性,非IE浏览器不支持。
方式2. CSS3滤镜
img { -webkit-filter: grayscale(100%); }
CSS3滤镜目前还不属于标准属性,现在暂时只有Google Chrome浏览器支持,其他浏览器均不支持
CSS实现灰度效果可以让网页更加容易实现一些特效,还记得纪念5.12大地震国内很多网页在一夜之间全部变成灰色吗?给网站加上下面的样式就可以轻松实现:
html { filter:Gray; -webkit-filter: grayscale(100%); }
有人肯定要说了CSS实现灰度效果虽好,但不能做到兼容全部浏览器呀,怎么办呢?CSS做不到的事情,大家肯定会想到用JS来实现,下面给大家推荐一款JS灰度效果插件:
grayscale.js
使用方法:
//引入插件 <script type="text/javascript" src="grayscale.js"></script>
//调用插件 <script type="text/javascript"> window.onload = function(){ var el = document.getElementById( 'body' ); grayscale( el ); }; </script>
兼容所有浏览器,执行后会在元素上加入很多行内样式,如果你对兼容性要求不高的话建议使用CSS实现灰度效果。
下一篇: 关于mybb主从数据配置
推荐阅读
-
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
-
图片变灰的css,能兼容各种浏览器的写法。 csssafarifirefoxchromeie
-
谷歌Chrome浏览器 兼容background-attachment:fixed;吗?如何做到火狐背景图片固定的效果_html/css_WEB-ITnose
-
用尽量少的DIV 标签配合样式如何实现下面2图效果(不考虑兼容性,不允许使用图片或背景图)?_html/css_WEB-ITnose
-
用尽量少的DIV 标签配合样式如何实现下面2图效果(不考虑兼容性,不允许使用图片或背景图)?_html/css_WEB-ITnose
-
Jquery实现图片 上传同步预览 兼容火狐各种浏览器
-
CSS 实现图片灰度效果 兼容各种浏览器
-
谷歌Chrome浏览器 兼容background-attachment:fixed;吗?如何做到火狐背景图片固定的效果_html/css_WEB-ITnose
-
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
-
CSS 实现图片灰度效果 兼容各种浏览器