Problem Description When <html> <head> <title>css filter issue</title> <style> body { height: 600px; background: red; filter: grayscale(1); /* Key code*/ } .fixed { color: yellow; position: fixed; top: 0; right: 0; } </style> </head> <body> <div class="fixed">fixed item</div> </body> </html> The effect diagram is as follows: Note that Solution The reason for this problem is: when In the above example, when However, if the filter acts on the root element (ie, the HTML tag), it will not create a new containing block for the absolute or fixed child elements. Reference: https://drafts.fxtf.org/filter-effects/#FilterProperty So the solution is very simple, just put the html { filter: grayscale(1); } Extensions 1. When an element includes the Additionally, Reference: https://www.w3.org/TR/css-position-3/#fixed-pos 2. The difference between the two can be found in this blog: http://phrogz.net/css/htmlvsbody.html ps: HTML element is max(screen height <viewport height>, internal element height <body element height>) This concludes this article on the causes and solutions for conflicts between filters and fixed. For more information on conflicts between filters and fixed, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Recommended tips for web front-end engineers
>>: A detailed introduction to the basics of Linux scripting
In the past few years, I have been moving back an...
Previous: Markup Language - Phrase Elements Origin...
Preface In WeChat applet, you can use globalData ...
This article shares with you the installation tut...
Preface Components are something we use very ofte...
1. MySQL transaction concept MySQL transactions a...
In CSS3, the transform function can be used to im...
Recently, I have implemented such an effect: clic...
Preface In backend development, in order to preve...
This article shares the specific code of Vue3 man...
The 2008.5.12 Wenchuan earthquake in Sichuan took...
Table of contents 1. What is block scope? 2. Why ...
Earlier, we used Docker to simply deploy the Spri...
Learn about similar methods for getting character...
1.1 Copy the nginx installation package and insta...