TA的每日心情 | 郁闷 2024-2-16 19:18 |
---|
签到天数: 36 天 连续签到: 1 天 [LV.5]常住居民I
版主
- 积分
- 1709
|
本帖最后由 taotao 于 2022-12-7 17:39 编辑
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。
第一种:修改CSS文件
我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰
CSS代码
- html {
- filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- -webkit-filter: grayscale(100%);
- }
复制代码
第二种:在网页的<head>标签内加入以下代码
如果你不想改动CSS文件,你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰
- <style type="text/css">
- html {
- filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- -webkit-filter: grayscale(100%);}
- </style>
复制代码
或
- <!--放到<head></head>之间即可-->
- <style type="text/css">
- html{
- filter: grayscale(100%); /* 标准写法 just for IE6-9 */
- -webkit-filter: grayscale(100%); /* webkit 内核支持程度较好 */
- -moz-filter: grayscale(100%); /* 其他内核现在并不支持,为了将来兼容性书写 */
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'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\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
- }
- </style>
复制代码- <style>
- html {
- filter: grayscale(100%);
- -webkit-filter: grayscale(100%);
- -moz-filter: grayscale(100%);
- -ms-filter: grayscale(100%);
- -o-filter: grayscale(100%);
- }
- </style>
- 主要是第一句:filter: grayscale(100%);下面的- -是为了兼容各种浏览器。
- -webkit-:主要兼容的浏览器是:谷歌的Chrome和苹果的Safari浏览器;
- -ms-:主要兼容的浏览器是:微软的Internet Explorer、Edge浏览器;
- -moz-:主要兼容的浏览器是:火狐的Firefox浏览器;
- -o-:主要兼容的浏览器是:欧朋的Opera浏览器。
复制代码 第三种:修改<html>标签加入内联样式
如里上面的两种方式都不喜欢,可以通过修改<html>标签,以加入内联样式的方法,达到网页变灰的效果
- <html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- -webkit-filter: grayscale(100%);">
复制代码
第四种:作者本人用的CSS代码
- body *{
- -webkit-filter: grayscale(100%); /* webkit */
- -moz-filter: grayscale(100%); /*firefox*/
- -ms-filter: grayscale(100%); /*ie9*/
- -o-filter: grayscale(100%); /*opera*/
- filter: grayscale(100%);
- filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
- filter:gray; /*ie9- */
- }
复制代码
PS:以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式。各位,喜欢哪种就自己挖去吧!
|
|