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 tritt auf, 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:

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

Obwohl das Ziel darin besteht, einen Inset-Box-Schatten 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. Durch Hinzufügen eines :after-Pseudoelements zum Container 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

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

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.