Gray website method

1. Why gray the website?

You must have noticed that many websites have turned gray, and the reason is known, it is to commemorate a great man. How do you turn the entire page into gray?

Second, the method of graying the website?

In fact, it is a very simple operation, requiring only one line of code.

html {
    
    
    filter: grayscale(1);
}

Use backdrop-filter to implement filter masking.
There are two properties related to filters in cssfilterandbackdrop-filter

filter: It is not only applied to the current element, but also to descendant elements. It has no effect on an empty background element.
backdrop-filter: Allows you to add graphical effects (such as blur or color shift) to the area behind an element. Because it applies to all elements behind the element, the element or its background must be made at least partially transparent in order to see the effect.
backdrop-filter: The current compatibility is not good, especially the Android mobile terminal.
Look at the effect in the picture above:

 <header class="box">
        <div>normal</div>
        <div class="filter">filter</div>
        <div class="backdropFilter">backdropFilter</div>
</header>

       .box {
    
    
            height: 500px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url(../day01/图片/雪山.jpg) no-repeat;
            background-size: cover;
        }

        div {
    
    
            width: 300px;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            background-color: rgba(255, 255, 255, .5);
        }

        .filter {
    
    
            filter: blur(5px);
        }

        .backdropFilter {
    
    
            backdrop-filter: blur(5);
        }

Note the difference between the two, the filter acts on the element itself, and the backdrop-filter acts on all elements covered by the area behind the element.

I have little talent and knowledge, if you have any questions or suggestions, you can communicate more.