QQ登录

登录  立即注册  找回密码

软件爱好者

搜索
查看: 45|回复: 0

[web] 让整个网站网页变灰的方法

[复制链接]
  • TA的每日心情
    郁闷
    2023-1-14 18:05
  • 签到天数: 35 天

    连续签到: 1 天

    [LV.5]常住居民I

    259

    主题

    50

    回帖

    1668

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    1668

    优秀版主

    发表于 2022-12-7 17:25:54 | 显示全部楼层 |阅读模式
    本帖最后由 taotao 于 2022-12-7 17:39 编辑

    一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。

    第一种:修改CSS文件
    我们可以在网页的CSS文件中添加以下的CSS代码,来实现网页黑白色,也就是网站变灰

    CSS代码


    1. html {
    2.     filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    3.     -webkit-filter: grayscale(100%);
    4. }
    复制代码


    第二种:在网页的<head>标签内加入以下代码
    如果你不想改动CSS文件,你可以通过在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰

    1. <style type="text/css">
    2. html {
    3. filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    4. -webkit-filter: grayscale(100%);}
    5. </style>
    复制代码



    1. <!--放到<head></head>之间即可-->
    2.   <style type="text/css">
    3.     html{
    4.     filter: grayscale(100%); /* 标准写法 just for IE6-9 */
    5.     -webkit-filter: grayscale(100%); /* webkit 内核支持程度较好 */
    6.     -moz-filter: grayscale(100%); /* 其他内核现在并不支持,为了将来兼容性书写 */
    7.     -ms-filter: grayscale(100%);
    8.     -o-filter: grayscale(100%);
    9.     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    10.     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+ */
    11.     }
    12. </style>
    复制代码
    1. <style>
    2. html {
    3. filter: grayscale(100%);
    4. -webkit-filter: grayscale(100%);
    5. -moz-filter: grayscale(100%);
    6. -ms-filter: grayscale(100%);
    7. -o-filter: grayscale(100%);
    8. }
    9. </style>
    10. 主要是第一句:filter: grayscale(100%);下面的- -是为了兼容各种浏览器。

    11. -webkit-:主要兼容的浏览器是:谷歌的Chrome和苹果的Safari浏览器;
    12. -ms-:主要兼容的浏览器是:微软的Internet Explorer、Edge浏览器;
    13. -moz-:主要兼容的浏览器是:火狐的Firefox浏览器;
    14. -o-:主要兼容的浏览器是:欧朋的Opera浏览器。
    复制代码
    第三种:修改<html>标签加入内联样式
    如里上面的两种方式都不喜欢,可以通过修改<html>标签,以加入内联样式的方法,达到网页变灰的效果

    1. <html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    2. -webkit-filter: grayscale(100%);">
    复制代码


    第四种:作者本人用的CSS代码

    1. body *{
    2. -webkit-filter: grayscale(100%); /* webkit */
    3. -moz-filter: grayscale(100%); /*firefox*/
    4. -ms-filter: grayscale(100%); /*ie9*/
    5. -o-filter: grayscale(100%); /*opera*/
    6. filter: grayscale(100%);
    7. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    8. filter:gray; /*ie9- */
    9. }
    复制代码


    PS:以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式。各位,喜欢哪种就自己挖去吧!
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|软件爱好者 ( 黑ICP备2022008596号-1 )

    黑公网安备 23060302000205号

    GMT+8, 2023-2-9 08:12 , Processed in 0.083099 second(s), 33 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表