每到一些节日,我国的大部分网站都会变为灰色,就比如这两天的清明节,如何让自己的网站全站变成灰色呢?
只需一个css样式即可,filter(滤镜)

1
2
3
4
html{
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}

使用方式有很多种

  1. 使用外部引入css
    style.css
    1
    2
    3
    4
    html{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    }
    引入自己写的外部css文件
    <link href="./css/style.css" rel="stylesheet">
  2. 内部引入
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <html>
    <head>
    <title>网站标题</title>
    <style>
    html{
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
    }
    </style>
    </head>
    <body>
    // 内容。。。。。
    </body>
    </html>
  3. 标签内嵌样式
    1
    2
    3
    4
    5
    6
    7
    8
    <html style="-webkit-filter: grayscale(100%);filter: grayscale(100%);">
    <head>
    <title>网站标题</title>
    </head>
    <body>
    // 内容。。。。。
    </body>
    </html>

可以使用以上方式在每个页面添加上即可实现全站灰色