画像上でインセット ボックス シャドウが機能しない理由とその修正方法

Inset Box-Shadow が画像と重ならない: ジレンマが解決されました

Inset box-shadow は、Web デザインに深みと強調を作成するための強力なツールです。ただし、画像上に適用すると問題が発生する可能性があります。この記事では、inset box-shadow が画像上で機能しない理由を検証し、CSS :after 疑似要素を使用した解決策を紹介します。

問題

以下を含むコンテナに inset box-shadow を適用する場合画像自体に影が表示されない場合があります。代わりに、影はコンテナの背景にのみ影響します。これにより、画像が影の上に浮かんでいるような錯覚が生じることがあります。

説明

この動作の理由は、Web ブラウザのレンダリング メカニズムにあります。インセット ボックス シャドウは要素の背景 (通常は単色またはグラデーション) に適用されます。画像が要素内に配置されると、ブラウザはその画像を独自の独立した背景を持つ別個の要素とみなします。その結果、インセットのボックスシャドウは画像の背景に影響しません。

解決策: CSS :after 擬似要素

この課題を克服するには、:after 擬似要素を利用できます。 :after 擬似要素をコンテナに追加し、それにインセット box-shadow を適用することで、画像をオーバーレイする新しいレイヤーを作成できます。

<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 コードは、:after 擬似要素を作成します。コンテナと同じ幅と高さです。これはコンテナ内に絶対的に配置され、上部に配置されます。インセットの box-shadow が :after 疑似要素に適用され、画像と確実に重なり合います。

以上が画像上でインセット ボックス シャドウが機能しない理由とその修正方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。