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
After installing MySQL, the root account prompt appears when logging in. mysql ERROR 1045 (28000): Access denied for use solution
After installing MySQL, you will find that the ro...
How to modify the user and group of a file in Linux
In Linux, when a file is created, the owner of th...
Detailed installation tutorial for MySQL zip archive version (5.7.19)
1. Download the zip archive version from the offi...
Web Design Tutorial (7): Improving Web Design Efficiency
<br />Previous article: Web Design Tutorial ...
Implementation of built-in modules and custom modules in Node.js
1. Commonjs Commonjs is a custom module in nodejs...
Docker advanced method of rapid expansion
1. Command method Run the nginx service in the cr...
Testing of hyperlink opening target
The target attribute of a link determines where th...
Detailed explanation of the use of CSS pointer-events attribute
In front-end development, we are in direct contac...
Alibaba Cloud Centos7.3 installation mysql5.7.18 rpm installation tutorial
Uninstall MariaDB CentOS7 installs MariaDB instea...
Vue implements a simple timer component
When doing a project, it is inevitable to encount...
How to pass W3C validation?
In addition to setting regulations for various ta...
CentOS 7.x docker uses overlay2 storage method
Edit /etc/docker/daemon.json and add the followin...
Summary of several submission methods of HTML forms
The most common, most commonly used and most gener...
Solution to the Chinese garbled code problem in the decompressed version of MYSQL
The decompressed version of MYSQL is installed 1:...
It is not recommended to copy the content in Word directly to the editor on the website.
<br />Question: Why is it not recommended to...