将页面变灰
来源:互联网 发布:知乎回答问题限制 编辑:程序博客网 时间:2024/04/30 07:26
不知道还有多少人记得曾经为了悼念5·12汶川地震,很多网站都将页面中所有的图片以及文字变成灰色。彪叔曾经也做了一个工具“哀悼的CSS(网站变灰)2.0”,用来把网站变灰。
想想当初有多人为了这个事情而忙得不可开交,要把所有的图片在photoshop里去色,再到样式表中把所有的颜色值改成灰色,最后等过了时间之后又要恢复原状。其中也有一些网站仅仅是在IE浏览器中用了滤镜来解决,并没有去处理其他浏览器的。
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=
1
);}
今天发现其实也可以让Firefox和Chrome变成灰色,不过Opera和Safari没成功,暂时先不理会,有一点东西就先跟大家分享。首先来看一下正常的页面http://guangjs.com,好多漂亮的彩图;再看一下我把源码下载,添加了一行CSS样式后的效果(点这里查看)。
html {
filter: grayscale(
100%
);
-webkit-filter: grayscale(
100%
);
-moz-filter: grayscale(
100%
);
-ms-filter: grayscale(
100%
);
-o-filter: grayscale(
100%
);
filter:
url
(desaturate.svg#grayscale);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=
1
);
-webkit-filter: grayscale(
1
);
}
大面积的操作降低页面性能是肯定的,这里分享这个也只是想跟大家说一下,最近我看到这个样式,感觉太厉害了。在这个样式代码中,涉及到了一个文件,就是desaturate.svg,从文件扩展名中可以看到,利用到了SVG技术了,代码如下:
<
svg
xmlns
=
"http://www.w3.org/2000/svg"
version
=
"1.1"
>
<
filter
id
=
"grayscale"
>
<
feColorMatrix
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"
type
=
"matrix"
/>
</
filter
>
</
svg
>
只需要将这代码保存为desaturate.svg,再通过url链接就可以了,十分简单。在前面看到的demo页面中是在body中增加了样式,影响页面中所有的元素,如果有需要的话,可以单独设置一个公共库中的类名来调用,如:
.pic_gray {
filter: grayscale(
100%
);
-webkit-filter: grayscale(
100%
);
-moz-filter: grayscale(
100%
);
-ms-filter: grayscale(
100%
);
-o-filter: grayscale(
100%
);
filter:
url
(desaturate.svg#grayscale);
filter:
gray
;
-webkit-filter: grayscale(
1
);
}
这样操作的话,可以让某个区域变成灰色,一切尽在你的掌握。
- 将页面变灰
- 页面变灰 样式
- 页面变灰
- 将整个网站变灰
- 将网页整个变灰
- 将网页变灰的方法
- 将imageview变灰,只需几行代码
- css 使整个html页面变灰
- 让页面图片文字整体变灰
- html弹出框并且页面变灰
- 怎么让页面变灰实现代码
- 前台页面弹出div,背景变灰
- 如何将禁用的文本框内容颜色变灰
- 弹出自定义PopupMenu并将背景变灰
- 网站整站页面变灰的css代码
- [备忘]收藏:使页面变灰的方法
- 通过Nginx使全站页面变灰,哀悼玉树地震遇难者
- 通过Nginx使全站页面变灰,哀悼玉树地震遇难者
- Eclipse 插件开发中常用方法总结(不断更新...)
- 优秀程序员不得不知道的20个位运算技巧
- show()与showDialog()的区别
- web培训
- 2012 阿里推荐活动小结
- 将页面变灰
- 用java实现文件锁定
- 传英特尔推自有品牌手机 或命名为Lexington
- 使用js实现显示鼠标坐标.
- 网页设计师对于字体大小的选择
- 浏览器核心引擎
- 关于Flex中用大括号{}进行数据绑定遇到的问题
- js在repeater控件内每一行<input type="checkbox"/>实现全选,全不选,然后获取每一行的ID删除
- 这个世界就是流氓打出来的