Table of contents
Preface
On some special anniversaries, the homepages of many websites are grayed out. This effect is actually achieved using filters, which can be achieved with just a few lines of CSS.
In the process of graying out the entire page, you must pay attention to the positioning elements on the page. You need to set the css on the html, otherwise the positioning will be confusing. The details are explained in the following code.
The page effect after being grayed out:
key code
Put the following css into the public css and set the class attribute to gray on the html.
Note: css should be set on the html node as much as possible
<style>
html.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter: gray;
}
</style>
Compatible with IE
Some versions of IE browsers do not support the above method, and you can use a simple representation of the mask layer. This is also the practice of some large websites:
html.ie-gray {
background-color: #ddd;
opacity: 0.5;
filter: Alpha(opacity=50);
}
Reasons for confusion in positioning
If there is fixed positioning or absolute positioning on the page, and if a filter is set on the body, the positioned elements will be confused.
Reason: When the filter attribute is used in the body, an error occurs in the positioning of the fixed element, that is, it is no longer positioned relative to the viewport, but relative to the entire web page (body element).
For a detailed explanation, please refer to this blog: https://juejin.cn/post/6844904117974859783
Follow me and don’t get lost
Friends, use your cute little hands to give me a like and follow me to learn more! ! !
If you have any questions, you can leave a message in the comment area or chat privately.
For more front-end, uniapp, nodejs and other related knowledge, please follow my personal blog: https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343