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

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

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

Solution to the problem of session failure caused by nginx reverse proxy

Several methods to modify CSS style to achieve gray web pages (no color, only light black and white)

Solution to the problem of session failure caused by nginx reverse proxy

A Brief Analysis on the Time Carrying Problem of MySQL

Implementation of communication between Vue and Flask

Use iptables and firewalld tools to manage Linux firewall connection rules

Solution to failure in connecting to mysql in docker

Explanation of the use of GROUP BY in grouped queries and the SQL execution order

Solve the group by query problem after upgrading Mysql to 5.7

JavaScript canvas to achieve raindrop effect

Analysis of the principle of Mybatis mapper dynamic proxy

Detailed explanation of how to limit the update/delete range using the mysql parameter sql_safe_updates

Recommend

Linux RabbitMQ cluster construction process diagram

How to connect JDBC to MySQL 5.7

Using front-end HTML+CSS+JS to develop a simple TODOLIST function (notepad)

Nginx installation and environment configuration under Windows (running nginx as a service)

Steps to deploy hyper-V to achieve desktop virtualization (graphic tutorial)

How to implement the association between frame windows and the use of the target attribute of hyperlinks

How to run tomcat source code in maven mode

Install MySQL 5.7.17 in win10 system

Solution to MySQL failure to start

Create a virtual environment using venv in python3 in Ubuntu

MySQL Optimization: Cache Optimization

Detailed explanation of the new background properties in CSS3

Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables

Example code of Vue3 encapsulated magnifying glass component

XHTML tutorial, a brief introduction to the basics of XHTML