Wie wende ich einen eingefügten Box-Shadow mit CSS auf Bilder an?

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="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/d/d2/Solid_white.png" class="lazy" alt="Wie wende ich einen eingefügten Box-Shadow mit CSS auf Bilder an?" >
</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!