Warum verschwindet der eingefügte Box-Schatten über Bildern mit transparentem Hintergrund?

Verstehen des Problems mit Inset-Box-Schatten bei Bildern

Im Webdesign ist die Verwendung von Inset-Box-Schatten eine gängige Technik, um Tiefe und Dimension innerhalb von Elementen zu erzeugen. Beim Umgang mit Containern, die Bilder enthalten, ist dies jedoch nicht immer einfach. Das Problem entsteht, wenn der Schatten des eingefügten Felds über den eingebetteten Bildern zu verschwinden scheint.

Der Fall der unsichtbaren Schatten

Betrachten Sie das Beispiel in der ursprünglichen Frage:

<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>

Obwohl das Ziel darin besteht, einen eingefügten Boxschatten um den Container, einschließlich des Bildes, anzuwenden, wird dieser nicht angezeigt. Warum passiert das?

Das Problem der Bildtransparenz

Der Grund für den fehlenden Schatten auf Bildern liegt in der Transparenz. Wenn ein Bild einen transparenten Hintergrund hat, ist es im Wesentlichen ein Fenster zum Hintergrundelement. In diesem Fall ist der Hintergrund des Containers schwarz. Dadurch wird der eingefügte Schatten in den transparenten Bereichen des Bildes unsichtbar.

Überwindung der Transparenzbarriere

Um dieses Problem zu umgehen, gibt es eine einfache und elegante Lösung: die Verwendung von CSS :nach Pseudoelement. Indem wir dem Container ein :after-Pseudoelement hinzufügen, können wir eine zusätzliche Ebene erstellen, die über dem Bild liegt und den Schatten des eingefügten Felds erhält.

Im aktualisierten CSS-Snippet unten wenden wir das :after-Pseudo an Element zum

Container:

<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>

Mit dieser Änderung erscheint der Schatten des eingefügten Feldes nun sowohl über den undurchsichtigen als auch über den transparenten Bereichen des Bildes und sorgt so für den gewünschten Schatteneffekt.

Das obige ist der detaillierte Inhalt vonWarum verschwindet der eingefügte Box-Schatten über Bildern mit transparentem Hintergrund?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!