[CSS] Inset Box Shadow auf Grafik

Ich arbeite an einer Website auf der viele Bilder einen Schatten nach innen haben sollen. Um sie nun nicht alle in Photoshop bearbeiten zu müssen, kam mir der “inset” Wert für das CSS3 Attribut “box-shadow” gelegen, dieser kann auf Bilder jedoch nicht ohne weiteres angewendet werden. Meine Lösung dazu möchte ich hier zeigen.

Auf img Elemente direkt angewendet, bleibt der Schatten hinter dem Bild, ist also nur bei Grafiken mit Transparenz überhaupt sichtbar. Führt man ein Wrapper-Element ein, das den Schatten zugewiesen bekommt, liegt dies zunächst mal auch hinter dem Bild, lässt sich aber mit z-index positionieren. Leider muss das Bild nach hinten gesetzt werden, den Wrapper vor das Bild setzen ist nicht möglich ¹:

1) Wrapper mit Box Shadow, Bild in den Hintergrund

HTML

<div class="box-shadow">
    <img src="/images/graphic.jpg" />
</div>

CSS

.box-shadow {
    box-shadow: 0 0 10px 6px white inset;
}
.box-shadow img {
    position: relative;
    z-index: -1;
}

Das Problem hierbei ist, dass das Bild nicht nur hinter den Wrapper rutscht, sondern auch hinter alle anderen Elemente im selben Stacking Context. Woraus sich ein Stacking Context ergibt ist in der Mozilla Dokumentation gut beschrieben:

• the root element (HTML),
• positioned (absolutely or relatively) with a z-index value other than “auto”,
• a flex item with a z-index value other than “auto”,
• elements with an opacity value less than 1. (See the specification for opacity),
• elements with a transform value other than “none”,
• elements with a mix-blend-mode value other than “normal”,
• elements with isolation set to “isolate”,
• on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is “auto”
• specifing any attribute above in will-change even you don’t write themselves directly

2) Stacking Context

Hier sinnvoll anwendbar war, dem direkten Elternelement des Wrappers (nennen wir es #parent) einen z-index sowie relative Positionierung zu verpassen:

CSS

#parent {
    position: relative;
    z-index: 0;
}

ist das nicht möglich, weil es z.B. anders positioniert ist oder der z-index einen unerwünschten Nebeneffekt hat, würde ich auf Opacity zurückgreifen, mit einem Wert von fast 1, so dass kein Effekt erkennbar ist, es aber immer noch einen Stacking Context erstellt.

CSS (alternativ)

#parent {
    opacity: 0.999;
}

Beitrag dazu auf StackOverflow