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.
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?
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.
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
<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!
So ändern Sie das CAD-Layout von Weiß auf Schwarz
Was sind die gängigen Linux-Systeme?
Linux-Befehl „Datei suchen'.
welche Dateien sind
So beheben Sie den HTTP-Request-415-Fehler
Mom.exe-Initialisierungsfehler
Window.setInterval()-Methode
So lösen Sie das Problem, dass Tomcat die Seite nicht anzeigen kann
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
