Many websites and apps were grayed out some time ago.
Let's first feel the effect of graying out.
How to achieve this gray effect? How to achieve the effect that pictures, text, and buttons are all grayed out?
Option 1, change to a gray UI, obviously the cost is too high, if you think about it with your toes, you will know that it is not possible.
Scenario 2, Code! ! ! As long as you write the following code under the html tag, you can see that the color system becomes gray
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
How does MDN explain the grayscale() function?
The grayscale() CSS function converts the input image to grayscale. Its result is a .
The general meaning is that grayscale is a CSS function that can turn an image into gray, the parameter is a percentage, and the result returns a filter function.
The CSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.
The filter function can be used to change the display effect of the image, which is used for the filter property of CSS. In addition to the grayscale function, the options are as follows:
As you can see, the current mainstream browser versions support the grayscale function, such as Chrome, edge, Firefox, Opera, Safari, etc. on the PC side, except IE.