CSS で WebKit フィルターのホバーにもかかわらず積み重ね順序を維持するにはどうすればよいですか?

Webkit フィルター ホバー時のスタック順序の変更: スタック コンテキストを理解する

WebKit フィルターを適用するとき、ホバー時にスタック順序に関して興味深い問題が発生します。画像上で順序が予期せず変化します。他のサイト要素を中断することなくこの課題を解決するには、スタッキング コンテキストの複雑さを詳しく見てみましょう。

スタッキング コンテキストは、ページ上に要素が表示される順序を決定します。要素のスタイル プロパティに変換、オーバーフロー、フィルターなどの特定の値が含まれる場合、要素は新しいスタッキング コンテキストを作成します。

提供された例では、WebKit フィルター (グレースケール) が画像に適用されると、スタッキング コンテキストは自動的に確立されます。この新しく作成されたコンテキストにより、絶対配置の div (「.slide-content」) が画像の下に配置され、画像が非表示になります。

この望ましくない動作を防止し、元のスタック順序を維持するには、次のようにします。改訂された解決策:

この CSS を置き換えます:

<code class="css">li a:hover img {
  -webkit-filter: grayscale(100%);
}</code>

この代替案を使用すると、スタッキング コンテキストの作成が回避されます:

<code class="css">li a:hover img::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  filter: grayscale(100%);
  z-index: -1;
}</code>

疑似要素 (: :before) を絶対位置で指定して画像の下に配置すると、新しいスタッキング コンテキストを作成せずにフィルターの効果を効果的にシミュレートできます。この賢い回避策を使用すると、意図した積み重ね順序を維持しながら、望ましい視覚効果を実現できます。

以上がCSS で WebKit フィルターのホバーにもかかわらず積み重ね順序を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。