The website is grayed out. Compatible code including images supports all browsers
|
Generally, on national days of mourning, days of major earthquakes, and Qingming Festival, we will turn our entire website gray to express our condolences to the deceased. So here are a few methods 1. Just add the code to the body It is very simple to achieve this effect. You only need one CSS code: filter: grayscale(100%); and put it in the style of the body element. The effects we achieved ourselves:
2. Directly in the called css style file, so there is no need to change the html code. Directly on the code:
Or download the code, the above code is recommended Copy code The code is as follows:html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><fecolormatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0 0 0 0 0 1 0\'></fecolormatrix></filter></svg>#grayscale"); filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); } 3. Tencent’s approach:
<style>
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- */
}
</style>Some other methods: 1. External style of web page black and white code (please use *.css file to write)
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}2. Internal style of black and white code of web page (written in the head tag)
<style type="text/css">
<!--
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
-->
</style>3. Inline black and white code of web page (write html tag, find html)
It’s just a code, collected by the editor of 123WORDPRESS.COM. It’s simple and practical, I hope it can help everyone. |
<<: Tips on disabling IE8 and IE9's compatibility view mode using HTML
>>: Vue's simple implementation process of imitating NetEase Cloud Music Player interface
Recommend
Some CSS questions you may be asked during an interview
This article is just to commemorate those CSS que...
VM VirtualBox virtual machine mount shared folder
One environment Install VMware Tools on CentOS 7 ...
Ideas for creating wave effects with CSS
Previously, I introduced several ways to achieve ...
How to install Jenkins on CentOS 8
To install Jenkins on CentOS 8, you need to use t...
Steps to modify the MySQL database data file path under Linux
After installing the MySQL database using the rpm...
How to isolate users in docker containers
In the previous article "Understanding UID a...
Detailed explanation of the usage and function of MySQL cursor
[Usage and function of mysql cursor] example: The...
Solution to MySQL startup successfully but not listening to the port
Problem Description MySQL is started successfully...
Teach you how to use webpack to package and compile TypeScript code
TypeScript Bundling webpack integration Usually, ...
How to configure environment variables in Linux environment
JDK download address: http://www.oracle.com/techn...
Several methods for js to determine the horizontal and vertical screen viewport detection of mobile terminals
Table of contents 1. How to obtain different view...
Detailed explanation of JavaScript upload file limit parameter case
Project scenario: 1. Upload file restrictions Fun...
MySQL high concurrency method to generate unique order number
Preface After this blog post was published, some ...
Some questions about hyperlinks
<br />I am very happy to participate in this...
Super detailed MySQL8.0.22 installation and configuration tutorial
Hello everyone, today we are going to learn about...