I suddenly remembered to write this article because the company’s products called in the morning and said: “Hurry up, the business has just been notified that the homepage of our official website, applet, and official account needs to change to a gray background. It is best to go online before 10:30 ". At that time, my heart was full of reluctance, but in the end life overwhelmed my hard spine. Hahaha, stop talking~
1. Why use the overall gray background
On special days, such as Tomb-sweeping Day, National Memorial Day, major natural disasters, the death of important leaders of the country, and other sad days, from national reports to company websites to individuals, in order to express our mourning for the deceased, we will let All pages of the website are grayed out (black and white).
For example:
2. Implementation method
1. CSS method
Add inline styles to the page html tag, or add it to the css file, or add it to the head tag. The principle is to use the filter method of ie and the grayscale() method provided by css. If you are interested, you can check the information~haha
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>Most browsers support css filter
img{
-webkit-filter: grayscale(100%); /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/
-moz-filter: grayscale(100%); /* 没有实现 */
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%); /* CSS3 filter方式，标准写法*/
filter: url(filters.svg#grayscale); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
img:hover{
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%);
filter: none; /* Firefox 4+, IE 6-9 */
}2. js method
Add the integrated js plug-in of Great God--->grayscale.js plug-in
Download link --> http://cn.baiwanzhan.com/js/gray_baiwanzhan.js
The limitation is that it may not be applicable to higher versions of Safari 4 and Chrome ( CanvasContext.getImageData is not supported ) and has not been verified.
window.οnlοad = function(){
grayscale(document.body);
}
//或
window.οnlοad = function(){
grayscale(document.getElementsByTagName("img"));
}
//或
$(function(){
grayscale($("#g"));
})