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

Barbara Streisand

リリース： 2024-10-30 00:48:02

オリジナル

911 人が閲覧しました

Why Does Inset Box-Shadow Disappear Over Images with Transparent Backgrounds?

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

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 サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：CSS ::after 擬似要素を使用してホバー時にコンテンツを動的に変更する方法次の記事：アンカータグだけでCSSスクロールアニメーションをトリガーできますか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事