Inset-Box-Shadow und Bilder: Eine Problemumgehung
Die Verwendung von Inset-Box-Shadow bei Containern, die Bilder enthalten, führt oft dazu, dass der Schatten nicht darüber erscheint die Bilder. Um diese Einschränkung zu überwinden, kann man auf eine einzigartige CSS-Lösung zurückgreifen.
Durch die Verwendung des Pseudoelements :after kann eine zweite schattentragende Ebene erstellt werden. Hier ist ein Beispielcode, der diese Technik demonstriert:
CSS:
main::after { box-shadow: inset 3px 3px 10px 0 #000000; content: ''; display: block; height: 100%; position: absolute; top: 0; width: 100%; }
HTML:
<main> <img src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png"> </main>
Diese Methode macht zusätzliche Elemente im Markup überflüssig und bietet eine sauberer und CSS-basierter Ansatz. Das :after-Element fungiert als „Schattencontainer“, der das Bild überlagert und es dem eingefügten Box-Schatten ermöglicht, sich darüber auszudehnen.
Das obige ist der detaillierte Inhalt vonWie wende ich einen eingefügten Box-Shadow mit CSS auf Bilder an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!