Yesterday was April 4 2020, the Ching Ming Festival.
This festival, I think many of us will not forget for many years in the future, this moment, we are involved in history, and became a witness to history.
From the New Year 2020 to the present, our country suffered a very painful experience, a lot of heroes in the way of helping others down, many more martyrs to defend the safety of the people were killed, half the national decline in chess, Beijing time 10:00, pulling the country air raid sirens sound, 3-minute silence to pay tribute retrograde hero.
Meanwhile, all public entertainment activities are stopped, including the live arts, film and television, games and more.
Yesterday, if you have opened vibrato APP, we have seen almost all the heroes of the fight against SARS, I think this pretty dry shake father, deserves to be heroes such publicity.
As of April 2, there were 60 police officers and 35 auxiliary police died in the first line of the fight against the epidemic and maintaining security and stability, with the precious lives to write a hymn after another heroic People's Public Security for the people.
As of April 3, sacrificing the fight against SARS has killed 41 doctors and nurses, in 2020 we have lost 13 academicians to mourn. Heaven is no longer willing to pain!
I am also here to fight the country's new crown pneumonia epidemic and death struggle martyrs compatriots expressed deep condolences, pay tribute to all the epidemic frontline health care workers to work and in the war.
Website dimmed
Yesterday morning, wake up, open the browser, the Internet are grayed out, and initially thought he was color-blind, and later to react, can not help but feel worried about their intelligence.
But surfing the circle, you can see many of our frequently used websites have become gray:
Can be seen, the station's content of these sites have become gray, including buttons, images, text and other information.
I do not know if you have a question mark about how they are produced grayed out, since I was born.
My first reaction was to rewrite the css styles, images made replacement.
I will not speak above good idea to make Ha, I think above this program is definitely replacement cost is very high, in case where I did not write right, and then things that unitary moths out of this thing a little play big.
So with this, I pressed F12 on the keyboard sacred to find the answer.
Sure enough, the answer is simple lay the debug window of the browser.
After opening a home east, press F12, see above in html adds a style:
Manually cancel the style here, see the page returned to normal color, specific code as follows:
html.o2_gray {
-webkit-filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
I most often go to visit the CSDN Look around:
Specific code 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);
}
It can be seen that the two sites css modified objects are html, is the role of global and long code CSDN than a lot of the East, first of all talk about, is not necessarily a good length, but this Code compatibility will look much better.
Webkit prefix meaning with the entry into force of the webkit browser kernel, the more common Chrome, the browser Sogou high-speed, 360 speed version of the browser, so a lot; and with moz prefix meaning is to take effect in firefox ; meaning IE is prefixed with ms (CSDN even have to say I also support IE are still shocked); o with the prefix refers to the Opera (European friends) browser (this is really no users in the country, but I can also say really, I spent some time behind Chrome is to invest in the arms).
principle
Here is actually directly on all of the DOM element adds a filter, filter search it on Baidu, you can find a MDN official document: https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter .
The graphics filter CSS property blur or the like is applied to the color shift elements. Filter is typically used to adjust the rendered image, background and border.
CSS standard contains a number of predefined functions have been achieved effect. You can also refer to a SVG filters, filter elements linked to the SVG (SVG filter element) through a URL.
Simply put, in fact, in front of all of the elements added a filter, we usually see with a lot of sister photo shoot plus filter is a mean (I hope my female readers do not see me play here).
Here official also gives a small example, as follows:
How, is not looking very fun look.
The official also gives examples of use:
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
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;
Examples of the various lower usage in official documents has given very clear, there is little interest partner can see for yourself, think online exercises can directly open CodeOpen or JSFiddle official links directly online to change to change, very easy.
We return to the above problems, in fact, has been very clear, and directly to the picture settings filter: grayscale(percent)just fine.
And we can also set the parameters in the gradation percentage, from 0% to 100%, just provided, of course, if not set, the default is 0, that is not gray.
Finally, look under the filter for browser compatibility, also provided by the Office:
It can be seen out on the PC side of IE did not do support, basically support it, and also for Firefox Firefox and the PC side of the mobile terminal SVG alone do the blessing, basically you can safely use, but from here you can We see, in front of the IE browser CSDN increase prefix is futile hope that students saw the front end CSDN do not hit me (manually run away).