Heim > Artikel > Web-Frontend > Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

高洛峰Original: 2017-03-13 17:58:292298Durchsuche

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 Attribut

Definition 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>

Nachdem Sie ihn als HTML-Datei gespeichert und geöffnet haben, sehen Sie die normale Reihenfolge

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Zu diesem Zeitpunkt fügen wir das Attribut „Deckkraft: 0,9“ zu #a hinzu und es passiert etwas Magisches: Es deckt die anderen beiden Ebenen ab

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

nur wenn auch ein Wert kleiner als „After“ für die Deckkraft festgelegt wird von 1 (zum Beispiel: 0,8) kann das folgende #c normale Regeln installieren, um #a abzudecken.

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Auf diese Weise wird eine Ebene mit einem Deckkraftattribut kleiner als 1 hinzugefügt und auf eine höhere Ebene gehoben. Was die wissenschaftlichen Prinzipien im Inneren angeht, habe ich es nicht herausgefunden, vielleicht ist es ein kleiner Fehler. Aber manchmal ist es etwas, was wir nicht wollen.

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;}

Nach dem Speichern und Aktualisieren sehen Sie den Effekt wie folgt:

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Mit anderen Worten: Nachdem Sie das Attribut „Relative Position“ auf einer Ebene verwendet haben, können Sie deren Ebene auf die gleiche Ebene wie die Deckkraft einstellen, sodass sie gemäß der normalen Sortierung (in nachfolgenden Experimenten) kaskadierend angezeigt werden kann , das habe ich auch für den absoluten Attributwert gemacht) Test, das Ergebnis verhält sich genauso wie der relative Attributwert). Wenn wir das Deckkraftattribut von #c löschen, können wir sehen, dass #c ganz unten steht.

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Es ist noch nicht fertig. Ich habe gerade das Attribut position: relative für #b aktiviert und Z-Index noch nicht verwendet. Wir legen den Z-Index von #b fest (zum Beispiel: 100). Offensichtlich wird #b zur obersten Ebene.

Lösung für das Problem der Kaskadenreihenfolge, das durch das Opazitätsattribut von CSS3 verursacht wird

Schlussfolgerung:

Eine Ebene, die absolute und relative Positionsattributwerte verwendet, ist höher als eine normale Ebenenebene. Die Ebene, die das Deckkraftattribut kleiner als 1 verwendet, ist ebenfalls höher als die normale Ebene und dieselbe Ebene wie die Ebene mit der angegebenen Position. Sie unterstützt jedoch nicht das Z-Index-Attribut, sodass die Ebene mit der angegebenen Position verwendet werden kann das Z-Index-Attribut, um die Ebenen mit einer Deckkrafteigenschaft von weniger als 1 abzudecken.

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einführung in das CSS-BoxmodellNächster Artikel：Einführung in das CSS-Boxmodell

In Verbindung stehende Artikel

Mehr sehen