背景が透明な画像上でインセット ボックスのシャドウが消えるのはなぜですか?

画像上のインセット ボックスのシャドウの問題を理解する

Web デザインでは、インセット ボックスのシャドウを使用して要素内に奥行きと次元を作成するのが一般的な手法です。ただし、画像を含むコンテナを扱うときは、必ずしも簡単ではありません。この問題は、挿入ボックスの影が埋め込まれた画像の上で消えているように見えるときに発生します。

目に見えない影の場合

元の質問で提供された例を考えてみましょう:

<code class="css">body {
  background-color: #000000;
}

main {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90%;
  height: 90%;
  background-color: #FFFFFF;
  box-shadow: inset 3px 3px 10px 0 #000000;
}

main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

<code class="html"><main>
  <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png">
</main></code>

目的は、画像を含むコンテナの周囲に差し込みボックスのシャドウを適用することですが、表示されません。なぜこのようなことが起こるのでしょうか?

画像の透明度の問題

画像の影が欠ける原因は透明度にあります。画像の背景が透明な場合、それは基本的に背景要素へのウィンドウとなります。この場合、コンテナの背景は黒になります。その結果、差し込み影は画像の透明な領域では見えなくなります。

透明性バリアを克服する

この問題を回避するには、CSS を使用するというシンプルで洗練された解決策が利用可能です。 :疑似要素の後に。 :after 疑似要素をコンテナに追加することで、画像の上に配置され、インセット ボックスのシャドウを受け取る追加のレイヤーを作成できます。

以下の更新された CSS スニペットでは、:after 疑似要素を適用します。要素を

に追加します。コンテナ:

<code class="css">main::after {
  box-shadow: inset 3px 3px 10px 0 #000000;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}</code>

この変更により、差し込みボックスの影が画像の不透明領域と透明領域の両方に表示され、望ましい影効果が得られます。

以上が背景が透明な画像上でインセット ボックスのシャドウが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。