Heim >Web-Frontend >CSS-Tutorial >Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird
In diesem Artikel wird hauptsächlich die Methode zur Lösung des Stapelreihenfolgeproblems vorgestellt, das durch das Opazitätsattribut von CSS3 verursacht wird. Er konzentriert sich hauptsächlich auf das Problem, dass Ebenen mit einem Opazitätsattributwert von weniger als 1 andere Ebenen überdecken. Es ist notwendig, dass sich Freunde darauf beziehen können
In einer kürzlich durchgeführten Arbeit wurde ein Problem entdeckt, als bei der Verwendung des Deckkraftattributs zur Erzielung einer allgemeinen Transparenz der Seite ein Problem festgestellt wurde. Wenn sich zwei Ebenen überlappen, überschreibt die Ebene mit dem Deckkraftattribut und dem Attributwert kleiner als 1 die nachfolgende Ebene. Deshalb habe ich ein Experiment durchgeführt, um den Grad der Deckkraft zu überprüfen. Die Kaskadenregel in Webseiten lautet wie folgt: Wenn keine der Ebenen ein absolutes oder relatives AttributDefinition Position hat, wird der HTML-Code welcher Ebene dahinter platziert Die Ebene wird oben angezeigt. Wenn das Positionsattribut angegeben und das Attribut z-index festgelegt ist, wird das Attribut mit dem größeren Wert oben angezeigt.
Problem gefunden
Für gewöhnliche Ebenen, bei denen der Z-Index nicht aktiviert ist: Wenn diese Ebene ein Deckkraftattribut mit einem Attributwert kleiner als 1 verwendet, welche Ebene wird oben gezeigt. Lass uns eine Demo machen. Der Code lautet wie folgt:<!DOCTYPE html> <html> <head> <title>带有 opacity 的层叠问题</title> <style> html{padding:40px;} .dd{width:100px;height:100px;} a{background:red;} b{background:blue;margin-left:20px;margin-top:-80px;} c{background:green;margin-left:40px;margin-top:-80px;} </style> </head> <body> <p id=”a”></p> <p id=”b”></p> <p id=”c”></p> </body> </html>
Das Problem lösen
Wie kann man dieses Problem lösen? Wie bereits erwähnt, hat die Ebene mit der angegebenen Position und dem Z-Index unter normalen Umständen eine höhere Ebene als die normale Ebene. Wie schneidet die Ebene mit der angegebenen Opazität im Vergleich zur Ebene mit der angegebenen Position ab? Fügen wir position: relativ zu #b hinzu und sehen. Der Stilcode lautet derzeit wie folgt:#a{background:red;opacity:0.9;} b{background:blue;margin-left:20px;margin-top:-80px;position:relative;} c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}
Schlussfolgerung:
Das obige ist der detaillierte Inhalt vonLösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!