CSS3の不透明度属性による重なり順問題の解決-CSSチュートリアル-php.cn

CSS3の不透明度属性による重なり順問題の解決

高洛峰

リリース： 2017-03-13 17:58:29

オリジナル

2425 人が閲覧しました

この記事では、CSS3の不透明度プロパティによって引き起こされる重なり順の問題を解決する方法を主に紹介します必要な友達がそれを参照できるように、不透明度属性値が1未満のレイヤーが他のレイヤーを覆ってしまう問題に焦点を当てています。

最近の作品で、opacity属性を使用してページ全体を透明にする際に問題が発見されました。 2 つのレイヤーが重なっている場合、不透明度属性と 1 未満の属性値を持つレイヤーが後続のレイヤーを上書きします。そこで、不透明度を検証する実験をしてみました。

Web ページのカスケードルールは次のとおりです。どちらのレイヤーにも絶対属性または相対属性として

position 属性が定義されていない場合、後ろに配置されているレイヤーの HTML コードが一番上に表示されます。 Position 属性を指定し、z-index 属性を設定した場合は、値が大きい方が上になります。問題が見つかりました

Zインデックスがアクティブ化されていない通常のレイヤーの場合、そのレイヤーが1未満の属性値を持つ不透明属性を使用している場合、どのレイヤーがその上に表示されます。デモを作ってみましょう。コードは次のとおりです。

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

ログイン後にコピー

HTML ファイルとして保存して開くと、通常の順序が表示されます

このとき、#a に属性 opacity: 0.9 を追加しました。問題が起こったので、他の 2 つをカバーしました各レイヤー CSS3の不透明度属性による重なり順問題の解決

別のレイヤー (例: #c) にも 1 未満の不透明度値 (例: 0.8) が設定されている場合にのみ、後続の #c は通常のルールをインストールできます#a をカバーします。 CSS3の不透明度属性による重なり順問題の解決

このようにして、不透明度属性が1未満のレイヤーが追加され、より高いレベルに引き上げられます。内部の科学的原理については、私にはわかりません。おそらく小さなバグかもしれません。しかし、時にはこれが起こりたくないこともあります。 CSS3の不透明度属性による重なり順問題の解決

問題を解決してください

それでは、この問題をどうやって解決するのでしょうか？前述したように、通常の状況では、位置と Z インデックスを指定したレイヤーは通常のレイヤーよりも高いレベルになります。では、不透明度を指定したレイヤーは、位置を指定したレイヤーとどのように比較されるのでしょうか。 #b に相対的な位置: を追加して見てみましょう。このときのスタイルコードは次のとおりです:

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

ログイン後にコピー

保存して更新すると、次のような効果が表示されます:

つまり、レイヤーの相対位置属性を使用した後、レベルと不透明度を同じにすることができ、その後は通常のソートに従ってカスケード表示が行われます（以降の実験では絶対属性値もテストしましたが、結果は相対属性値と同じでした）。 #c の不透明度属性を解除すると、#c が最下位にランクされていることがわかります。 CSS3の不透明度属性による重なり順問題の解決

まだ終わっていません。前に#bのposition:relative属性をアクティブにしただけで、z-indexはまだ使用していません。 #b の z-index (例: 100) を設定します。明らかに、#b が最上位になります。 CSS3の不透明度属性による重なり順問題の解決

CSS3の不透明度属性による重なり順問題の解決

結論:

position属性値のabsoluteとrelativeを使用したレイヤーは、通常のレイヤーよりも上位になります。 1未満の不透明度属性を使用したレイヤーも通常のレイヤーより上位で、指定位置のレイヤーと同じレイヤーになりますが、z-index属性をサポートしていないため、指定位置のレイヤーが使用できます。バンドをカバーするための z-index 属性。不透明度プロパティが 1 未満のレイヤー。

以上がCSS3の不透明度属性による重なり順問題の解決の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。