Yesterday was April 4, 2020, tomb-sweeping Day.

This Qingming Festival, I think many of us will not forget for many years to come, this moment, we participate in history, at the same time become a witness of history.

2020 from the New Year to now, our country has suffered a very painful experience, many heroes fell on the way to help others, there are many martyrs to protect the safety of the people died, the national drop half chess, 10 am Beijing time, the national air defense sirens, silence for 3 minutes, to pay tribute to the hero who went against the law.

At the same time, all public entertainment activities, including live broadcasting, variety shows, movies and games, have been suspended.

Yesterday, if you opened the Douyin APP, almost all you saw were the heroes of our fight against COVID-19. I think douyin’s father did a good job this time, and heroes deserve to be publicized like this.

As of April 2, a total of 60 police officers and 35 auxiliary police officers had sacrificed their lives on the front lines of fighting against the epidemic and maintaining security and stability, writing songs of praise to the people for their heroism.

As of April 3, 41 doctors and nurses have died in the fight against COVID-19, and we have lost 13 academicians in 2020. May there be no more pain in heaven!

I would also like to express my deep condolences to the martyrs and compatriots who have died in the fight against COVID-19 across the country, and pay tribute to all the workers and medical workers on the front lines of the war against COVID-19.

Website is grey

I woke up yesterday morning, opened my browser, and the Internet turned gray. At first, I thought I was color blind, but later I realized that I was worried about my IQ.

But a quick surf around the web reveals that many of our most popular websites have turned gray:

As you can see, the entire content of these sites is grayed out, including buttons, images, text and other information.

I don’t know if you have any questions about how they turned gray, but I did.

My first reaction was to rewrite the CSS and replace the image.

Not to mention my above idea is not good, I think of the scheme above, the replacement cost is quite high, in case there is something wrong, and then make some trouble, this thing is a bit too big.

So with that question in mind, I pressed the holy F12 on my keyboard to find the answer.

Sure enough, the answer simply lies in the browser debug window.

Open the home page of a site and press F12 to see a style added to the HTML:

Remove this style manually and see that the page has returned to its normal color. The code is as follows:

html.o2_gray {
    -webkit-filter: grayscale(100%).filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
Copy the code

Take another look at CSDN, my favorite hangout:

The specific code is as follows:

html {
    -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);
}
Copy the code

As you can see, the CSS modifiers on both sites are HTML, which is global, and the code in CSDN is much longer than that in some east. First of all, long is not necessarily good, but the code will be much more compatible.

With webKit prefix means in webKit kernel browser effect, more common Chrome, Sogou high-speed browser, 360 speed version and so on a lot of browsers; The moz prefix means it works in Firefox; The word with the ms prefix means IE (I have to say I’m surprised CSDN still supports IE); The one with the o prefix refers to the Opera browser (which is really not popular in China, but is actually ok, I used it for a while before switching to Chrome).

The principle of

In fact, a filter is directly added to all DOM elements. Search filter on Baidu and you can find an official DOCUMENT of MDN: developer.mozilla.org/zh-CN/docs/… .

The filter CSS attribute applies graphical effects such as blur or color offset to elements. Filters are usually used to adjust images, backgrounds and border renderings.

The CSS standard contains functions that implement predefined effects. You can also refer to an SVG filter and link to an SVG Filter element via a URL.

Basically, it’s a filter in front of all the elements, just like we do when we see a lot of girls taking pictures. (I hope my female readers don’t hit me.)

A small example is also provided here, as follows:

What do you say? Doesn’t that look like fun.

The official also provides an example of how to use:

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(04.);
filter: contrast(200%).filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%).filter: hue-rotate(90deg);
filter: invert(75%).filter: opacity(25%).filter: saturate(30%).filter: sepia(60%)./* Multiple filters */
filter: contrast(175%).brightness(3%)./* Global values */
filter: inherit;
filter: initial;
filter: unset;
Copy the code

The CodeOpen or JSFiddle link is provided by the official CodeOpen or JSFiddle link, which is very easy to change online.

Let’s go back to the above problem, which is already obvious. Just set filter: Grayscale (percent) to the image.

And we can also set the grayscale percentage in the parameter, from 0% to 100%, optionally set, of course, if not set, the default is 0, that is, there is no grayscale.

Finally, let’s take a look at filter’s compatibility with browsers.

As you can see, IE on PC is not supported, and it is basically supported. Besides, Firefox on mobile and Firefox on PC are separately enhanced, so it can be used safely. However, you can also see from here, The prefix added to the IE browser in front of CSDN is useless, I hope the CSDN front-end students see do not hit me (manual escape).

reference

Developer.mozilla.org/zh-CN/docs/…