Summary of a CSS code that makes the entire site gray
|
In order to express the deep condolences of people of all ethnic groups across the country to the martyrs and victims of the fight against the COVID-19 epidemic, the State Council issued an announcement today, deciding to hold a national mourning event on April 4, 2020 (tomorrow). During this period, flags were flown at half-mast throughout the country and in embassies abroad, public entertainment activities were suspended nationwide, and starting at 10 a.m. on April 4, the people of the country observed a three-minute silence, cars, trains, and ships sounded their horns, and air defense alarms sounded. When I thought about the fact that the entire website turned completely gray when I visited it on the day of silence in the past, I thought that if I started development and design modification immediately, it would consume a lot of time and energy. Would there be CSS that could directly process all the elements and turn them gray? Then I thought of the CSS3 filter, and it also confirmed the feasibility of this idea. filter: grayscale can adjust the grayscale value of an element
.gray-filter {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
Actual Combat Take Station B as an example: Under normal circumstances, after the navigation bar of Station B slides down, it is fixed at the top of the page.
But if you add this CSS to the body, the following will happen:
You can find that it is no longer fixed at the top of the page, but has gone outside the screen. The little TV man in the lower left corner of the screen has also moved to the upper half of the page. Why does this happen? I went to Google to look up relevant information and found: When a filter style is specified and its value is not none, if there are elements with position absolute or fixed among the child elements of the element to which the style is applied, a new container will be created for these elements, so that the positioning benchmark of these absolutely or fixedly positioned elements is relative to the newly created container. We can infer that fixed is positioned relative to the root container of HTML. If a filter is set on the body, a new positioning reference will be created. When the page scrolls, the body is scrolled out of the screen, and the fixed of all descendant elements in the body will produce unexpected effects. How to solve it? Solution 1 A method that affects the entire site: We can apply this style to the root element html. Even if a new positioning reference element is created, it will not have an unexpected impact on the descendant elements.
html {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}Effect:
Solution 2 If the entire site is not grayed out, we can add the elements that need to use the filter separately
<html>
<body>
<div class="gray-filter"></div>
</body>
</html>
<style>
.fixed {
position: fixed;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
background-color: #f00;
}
.gray-filter {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-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\'/></filter></svg>#grayscale");
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
}
</style>
This is the end of this article about a CSS code summary that makes the entire site grayed out. For more relevant CSS site-wide graying content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Using js to implement simple switch light code
Recommend
Docker container source code deployment httpd use storage volume to deploy the website (recommended)
Table of contents Deploy httpd with docker contai...
Autotrash tool for Linux to automatically delete old junk files at a scheduled time
Autotrash is a command line program that automate...
Linux uses the scp command to copy files to the local computer and copy local files to the remote server
As shown below: Copy the remote server's file...
mysql solves the problem of finding records where two or more fields are NULL
Core code /*-------------------------------- Find...
Analysis and solution of the reasons why MySQL scheduled tasks cannot be executed normally
Table of contents Preface Cause analysis and solu...
Web designers also need to learn web coding
Often, after a web design is completed, the desig...
Practical way to build selenium grid distributed environment with docker
Recently, I needed to test the zoom video confere...
Implementation of restoring data by directly copying files in the data directory in mysql
mysql copies the files in the data directory to r...
Detailed explanation of redis5 cluster construction and usage under Linux (Centos7)
Table of contents 1. Brief description 2. Steps t...
JavaScript to achieve simple provincial and municipal linkage
This article shares the specific code for JavaScr...
Solution to the problem that order by is not effective in MySQL subquery
By chance, I discovered that a SQL statement prod...
Example explanation of alarm function in Linux
Introduction to Linux alarm function Above code: ...
Specific example of MySQL multi-table query
1. Use the SELECT clause to query multiple tables...
How to modify the user and group of a file in Linux
In Linux, when a file is created, the owner of th...
How to run Linux commands in the background
Normally, when you run a command in the terminal,...