Bagaimana untuk Membuat Inset Box-Shadows Render Over Imej?

Inset Box-Shadow dan Image Overlap

Dalam senario di mana bekas dengan inset box-shadow mengandungi kedua-dua imej dan teks, nampaknya bayang itu tidak render atas imej. Isu ini berlaku kerana bayang sisipan digunakan pada bekas itu sendiri, manakala imej ialah elemen berasingan dalam bekas.

Untuk menyelesaikan isu ini dan mencapai kesan bayang yang diingini, pertimbangkan untuk menggunakan :selepas elemen pseudo:

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

Dengan menambahkan CSS ini, kotak separa lutsinar dicipta di atas imej, dengan berkesan membenarkan bayang sisipan meluas ke seluruh kawasan penuh bekas, termasuk imej.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Inset Box-Shadows Render Over Imej?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!