画像の上にインセット ボックスの影をレンダリングする方法

インセット ボックス シャドウと画像のオーバーラップ

インセット ボックス シャドウを持つコンテナーに画像とテキストの両方が含まれるシナリオでは、シャドウが重なっていないように見える場合があります。画像の上にレンダリングします。この問題は、画像がコンテナ内の別個の要素であるのに対し、差し込みシャドウがコンテナ自体に適用されるために発生します。

この問題を解決し、目的のシャドウ効果を実現するには、: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>

この CSS を追加すると、画像の上に半透明のボックスが作成され、挿入影が画像を含むコンテナの全領域に効果的に広がるようになります。

以上が画像の上にインセット ボックスの影をレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。