最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
网站变灰色各种代码总结
时间:2015-01-23 编辑:简简单单 来源:一聚教程网
今天给大家分享一个web前端的小技巧哦,就是如何在公共哀悼纪念日,让网站变为黑白颜色。其实很多方法有css实现,和js实现的。网上都有的,js有js的特点,css有css优点,当然缺点也是存在。
1.超兼容IE,火狐firefox,谷歌的css滤镜
html {
filter: grayscale(100%);//IE浏览器
-webkit-filter: grayscale(100%);//谷歌浏览器
-moz-filter: grayscale(100%);//火狐
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);//谷歌浏览器
}
优点:基本兼容所有浏览器。
缺点:就是ie6可能嗝屁了,ie页面电脑资源消耗肯能大一点。
2.js代码实现grayscale.js代码实现,点击grayscale.zip
引用文件,就不要讲了吧,好吧还是说一下:
<<>scriptsrc="http://james.padolsey.com/demos/grayscale/grayscale.js">
使用:
优点:兼容所有浏览器,还能针对不同dom来实现
缺点:电脑资源消耗肯能大一点,尤其老ie,老电脑浏览器一度卡死。
3.SVG滤镜实现
新建一个空白文件,比如说:gray.svg. 拷贝进去如下的XML代码:
<<>svgversion="1.1"xmlns="http://www.w3.org/2000/svg">
<<>filterid="grayscale">
<<>feColorMatrixtype="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"/>
CSS调用代码:
filter: url(gray.svg#grayscale);
对应ie还要多写一下:
filter: gray;
优点:兼容所有浏览器
缺点:修改很麻烦。
结束语:时间有限,知识无限。就更新到这边吧。我的网名是zyimm我喜欢分享我自己知识
相关文章
- 网站404错误如何解决 网站404错误解决的方法介绍 12-14
- 酒店网站设计实例欣赏 11-30
- 网站文字配色分享 11-22
- 内容型网站盈利方法介绍 10-31
- 网站盈利模式分享 10-31
- 图库网站分享 10-24