To express the deep condolences of people of all ethnic groups in China over the deaths of those who sacrificed their lives in the fight against COVID-19, The State Council announced today that a national mourning will be held on April 4, 2020 (tomorrow). During this period, flags will fly at half-mast across the country and in embassies overseas, and public entertainment activities will be suspended nationwide. From 10 am on April 4, people will observe three minutes of silence, while air raid sirens and horns of cars, trains and ships will sound.

Thought of mourning days past when accessing a web site found that the site will become gray, namely thought if immediately began to develop, design modification work will consume large amounts of time and effort, it would not have CSS can deal directly with all the elements will they become grey, and he thought of the range of the filter (filter), and also confirmed the feasibility of this idea.

Filter: Grayscale uses an element’s grayscale value that can be adjusted

.gray-filter {
    filter: grayscale(100%).-webkit-filter: grayscale(100%).-moz-filter: grayscale(100%).-ms-filter: grayscale(100%).-o-filter: grayscale(100%).filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
Copy the code

In actual combat

Take station B as an example:

Under normal circumstances, the navigation bar of station B is fixed at the top of the page after sliding down

But if you add this CSS to the body, something like this happens:

I went to Google and looked it up and found:

If a filter style is specified and the value is not None, a new container will be created for elements whose position is absolute or fixed in their children. Make these absolutely or fixatively positioned elements base their positioning relative to the newly created container.

We can imagine that fixed is positioned relative to the HTML root container. If filter is set on the body, a new positioning baseline will be created, and the body will be rolled out of the screen when the page is rolled, so the fixed of all descendant elements in the body will produce the expected effect.

How to solve it?

Solution 1

We can apply this style to the root element HTML so that even if we create a new positioning base element, there will be no undesirable impact on descendant elements.

html {
    filter: grayscale(100%).-webkit-filter: grayscale(100%).-moz-filter: grayscale(100%).-ms-filter: grayscale(100%).-o-filter: grayscale(100%).filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
Copy the code

Effect:

Solution 2

We can add the elements we need to use filter separately


<html>
    <body>
        <div class="gray-filter"></div>
    </body>
</html>

<style>
.fixed {
    position: fixed;
    top: 100px;
    left: 100px;
    height: 100px;
    width: 100px;
    background-color: #f00;
}
.gray-filter {
    filter: grayscale(100%).-webkit-filter: grayscale(100%).-moz-filter: grayscale(100%).-ms-filter: grayscale(100%).-o-filter: grayscale(100%).filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}
</style>
Copy the code

Compatible IE method

A lot of people have commented that the lower version of IE doesn’t support it, so I googled it and there is a way to implement it and the way to implement it is to introduce grayscale.js, Demo download grayscale.js Demo, right

After a brief look at the source code of this JS, it is found that color, background-color, borderColor and other attributes will be extracted and replaced with gray. Background-image and images will be drawn with canvas and processed into gray and then replaced with the processed image source

In demo functions. Js is to identify the browser type and version by judging the browser userAgent, and make the corresponding processing

Resources and Demo sources

Problems under small programs

Wechat small program I tried to add on the page, but fixed is still invalid, can only use the second method to add style, if you have a solution can comment to put forward we discuss ~

Related articles:

CSS3 filter MDN

Compatibility with IE solution reference materials and demo sources

The first time published articles have questions please give advice, thank you!