Several methods to modify CSS style to achieve gray web pages (no color, only light black and white)
|
Generally, during Qingming Festival, the National Day of Mourning, the day of a major earthquake, and the death or anniversary of some influential great people, as webmasters, we will turn all the pages of our website into gray (black and white) to express our condolences to the deceased. So today let’s talk about how to implement this function through a few simple lines of code. This morning, a netizen mentioned that he hopes to change the overall color tone of the website to gray and black. I remember that this was used in the past to commemorate certain dates, and it was also used on the 123WORDPRESS.COM website. I remember that at that time it could be achieved directly by modifying CSS. Since there are users who need it, I will take some time to sort it out and see if there are other better methods. We can choose the appropriate CSS code style according to actual needs and add it to the code of our own web page template to achieve gray, black and white styles of the web page. First, web page black and white code style A: Modify the CSS file We can add the following CSS code to the CSS file of the web page to make the web page black and white, that is, the website gray CSS Code Web page black and white code style A
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}This code webpage black and white code style B is also recommended
<style>
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
_filter:none;
}
</style>Here we can add the code to the HEAD template to achieve the whole site. Second method: Add the following code to the <head> tag of the web page If you don't want to modify the CSS file, you can gray out the website pages by adding inline CSS code inside the <head> tag in the header of the web page. Code
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>The third method: modify the <html> tag to add inline styles If you don't like the above two methods, you can modify the <html> tag to add inline styles to achieve the effect of graying out the web page. Code
Fourth: CSS code used by the author himself Code:
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}
Here, we choose to add to the code according to actual needs. PS: The above methods all control the display of the page through CSS filters. The only difference is the way the CSS code is called. You guys, dig up whichever one you like! |
<<: Vue implements horizontal scrolling of marquee style text
>>: MariaDB-server installation of MySQL series
Recommend
The principle and configuration of Nginx load balancing and dynamic and static separation
Table of contents 1. Nginx implements load balanc...
More than 100 lines of code to implement react drag hooks
Preface The source code is only more than 100 lin...
Detailed steps for remote deployment of MySQL database on Linux
Linux remote deployment of MySQL database, for yo...
Vue realizes screen adaptation of large screen pages
This article shares the specific code of Vue to a...
A brief analysis of Vue's asynchronous update of DOM
Table of contents The principle of Vue asynchrono...
Solve the problem that the Node.js mysql client does not support the authentication protocol
Preface The mysql module (project address is http...
MySQL: mysql functions
1. Built-in functions 1. Mathematical functions r...
JavaScript implements single linked list process analysis
Preface: To store multiple elements, arrays are t...
The design process of Alibaba's Mid-Autumn Festival logo combined with the website
<br />First think of the idea, then draw a s...
Steps to install Pyenv under Deepin
Preface In the past, I always switched Python ver...
Detailed explanation of the process of using GPU in Docker
Table of contents Download tf-gpu Build your own ...
vue-router hook function implements routing guard
Table of contents Overview Global hook function R...
Sharing several methods to disable page caching
Today, when developing, I encountered a method wh...
Use Vue3+Vant component to implement App search history function (sample code)
I am currently developing a new app project. This...
Installation and use tutorial of Elasticsearch tool cerebro
Cerebro is an evolution of the Elasticsearch Kopf...