画像上のインセット ボックスの影の問題を理解する

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

目に見えない影の場合

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

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

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

画像の透明度の問題

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

透明性バリアの克服

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

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

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

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