【Record】How to make the website grayed out?

Recently, everyone should have noticed that all major websites and apps have turned gray. The reason is also very simple. It is generally used on Ching Ming Festival, National Day of Mourning, days of major earthquakes, and the death or anniversary of some influential great men. Condolences to the deceased.

Find a few websites to visit

CSDN：

Taobao:

It can be seen that the homepage and content of many websites have also turned gray, including buttons, pictures, etc., such as Bilibili, Baidu, CSDN, Taobao, etc. How is this possible? Make a note of it here.

From the above screenshots, we can find that these mainstream websites have similar ways to achieve graying, essentially using the grayscale value in the filter attribute in CSS.

What is the filter attribute? The official introduction of MDN is as follows:

filter CSS properties apply graphical effects such as blurring or color shifting to elements. Filters are often used to adjust the rendering of images, backgrounds and borders.

The CSS standard includes some functions that implement predefined effects. You can also refer to an SVG filter via a URL link to the SVG filter element (SVG filter element[1]).

In fact, it is used to add different filters to elements, such as changing the picture, color, blur, contrast and other information through the filter style. This attribute supports passing in various Filter functions. The grayscale() function is the key to graying. The grayscale() function will change the grayscale of the input image, and the function has a parameter that represents the scale of conversion to grayscale. When the value is 100%, the image is fully converted to grayscale; when the value is 0%, the image is unchanged. A value between 0% and 100% is a linear multiplier for the effect. If no value is set, the default is 0.

Therefore, only one line of code is needed to achieve page graying:

html  {
     filter: grayscale(100%);
}

But why the above site, there are other property settings? This is because filter is a new property of CSS3, not all browsers and versions support it.

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

This is done in order to be compatible with more browsers to achieve the graying effect. The instructions are as follows:

• -webkit-: Prefixed with webkit can take effect in browsers with webkit kernel.
• -moz-: prefixed with moz can take effect in Firefox browser.
• -ms-: prefixed with ms can take effect in IE browser.
• -o-: Prefixed with o can take effect in Opera browser.

In addition, the filter can set the gray effect, and there are other property settings, such as: Gaussian blur visual effect, adjust the brightness level of the image, adjust the contrast of the image, set the transparency effect of the image, set the saturation and so on. If you are interested, you can refer to the official website documentation: filter - CSS (Cascading Style Sheets) | MDN

Record it, remember the ancestors~