Wie rendert man eingefügte Box-Schatten über Bildern?

Inset-Box-Schatten und Bildüberlappung

In einem Szenario, in dem ein Container mit Inset-Box-Schatten sowohl Bilder als auch Text enthält, kann es so aussehen, als ob der Schatten dies nicht tut über die Bilder rendern. Dieses Problem tritt auf, weil der eingefügte Schatten auf den Container selbst angewendet wird, während das Bild ein separates Element innerhalb des Containers ist.

Um dieses Problem zu beheben und den gewünschten Schatteneffekt zu erzielen, sollten Sie die Verwendung von :after in Betracht ziehen Pseudoelement:

<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>

Durch Hinzufügen dieses CSS wird ein halbtransparenter Rahmen über dem Bild erstellt, sodass sich der eingefügte Schatten effektiv über den gesamten Bereich des Containers, einschließlich des Bildes, erstrecken kann.

Das obige ist der detaillierte Inhalt vonWie rendert man eingefügte Box-Schatten über Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!