给网站添加全站灰色

avatar
Lete乐特
247
1min

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

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

使用方式有很多种

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

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

Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/website-grayness-filter.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !