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
MySQL 8.0.16 compressed package installation and configuration method graphic tutorial
This article shares the installation and configur...
Implementing a web calculator based on JavaScript
This article shares the specific code of JavaScri...
How to install MySQL 5.7.29 with one click using shell script
This article refers to the work of 51CTO blog aut...
How to use CSS styles and selectors
Three ways to use CSS in HTML: 1. Inline style: s...
Detailed explanation of Angular parent-child component communication
Table of contents Overview 1. Overview of input a...
JavaScript single thread and asynchronous details
Table of contents 1. Task Queue 2. To explain som...
How to implement an array lazy evaluation library in JavaScript
Table of contents Overview How to achieve it Spec...
MySQL compression usage scenarios and solutions
Introduction Describes the use cases and solution...
An article to master MySQL index query optimization skills
Preface This article summarizes some common MySQL...
Tutorial on installing MySQL with Docker and implementing remote connection
Pull the image docker pull mysql View the complet...
How to insert Emoji expressions into MySQL
Preface Today, when I was designing a feedback fo...
20 Signposts on the Road to Becoming an Excellent UI (User Interface) Designer
Introduction: Interface designer Joshua Porter pub...
Users need to know why
When I was in the securities company, because the ...
Some findings and thoughts about iframe
This story starts with an unexpected discovery tod...
Solution to the problem of data loss when using Replace operation in MySQL
Preface The company's developers used the rep...