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
How to prevent duplicate submission in jquery project
In new projects, axios can prevent duplicate subm...
18 Web Usability Principles You Need to Know
You can have the best visual design skills in the...
How to implement ansible automated installation and configuration of httpd in Linux system
1. Use ansible's playbook to automatically in...
React+Antd implements an example of adding, deleting and modifying tables
Table of contents Table/index.js Table/model/inde...
MySQL 1130 exception, unable to log in remotely solution
Table of contents question: 1. Enable remote logi...
MySQL 8.0.24 version installation and configuration method graphic tutorial
This article records the installation and configu...
A brief talk about MySQL semi-synchronous replication
Introduction MySQL achieves high availability of ...
Detailed explanation of the 8 attribute values of the background attribute (interview question)
The value of the background property in CSS backg...
The meaning of the 5 types of spaces in HTML
HTML provides five space entities with different ...
Use of Linux xargs command
1. Function: xargs can convert the data separated...
Comprehensive understanding of HTML basic structure
Introduction to HTML HyperText Markup Language: H...
MySQL aggregate function sorting
Table of contents MySQL result sorting - Aggregat...
How to remove the dotted border when clicking a link in FireFox
I encountered several browser compatibility issue...
How to solve the Mysql transaction operation failure
How to solve the Mysql transaction operation fail...
Detailed explanation of the use of find_in_set() function in MySQL
First, let’s take an example: There is a type fie...