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
Vue custom bullet box effect (confirmation box, prompt box)
This article example shares the specific code of ...
Summary of MySQL common SQL statements including complex SQL queries
1. Complex SQL queries 1.1. Single table query (1...
Detailed tutorial on compiling and installing MySQL 5.7.24 on CentOS7
Table of contents Install Dependencies Install bo...
Django uses pillow to simply set up verification code function (python)
1. Import the module and define a validation stat...
Tutorial on installing phpMyAdmin under Linux centos7
yum install httpd php mariadb-server –y Record so...
Difference between querySelector and getElementById methods in JS
Table of contents 1. Overview 1.1 Usage of queryS...
Detailed explanation of how Vue components transfer values to each other
Table of contents Overview 1. Parent component pa...
Detailed explanation of the adaptive adaptation problem of Vue mobile terminal
1. Create a project with vue ui 2. Select basic c...
Example code for using Nginx to implement 301 redirect to https root domain name
Based on SEO and security considerations, a 301 r...
One sql statement completes MySQL deduplication and keeps one
A few days ago, when I was working on a requireme...
Detailed explanation of JavaScript's garbage collection mechanism
Table of contents Why do we need garbage collecti...
11 common CSS tips and experience collection
1. How do I remove the blank space of a few pixels...
Workerman writes the example code of mysql connection pool
First of all, you need to understand why you use ...
Vue's vue.$set() method source code case detailed explanation
In the process of using Vue to develop projects, ...
Summary of the use of element's form elements
There are many form elements. Here is a brief sum...