Mengapa Bayang-Kotak Inset Hilang Pada Imej dengan Latar Belakang Lutsinar?

Memahami Isu Inset Box-Shadow ke atas Imej

Dalam reka bentuk web, menggunakan bayang kotak inset untuk mencipta kedalaman dan dimensi dalam elemen adalah teknik yang biasa. Walau bagaimanapun, apabila berurusan dengan bekas yang mengandungi imej, ia tidak selalunya mudah. Masalah timbul apabila bayang kotak inset nampaknya hilang di atas imej terbenam.

Kes Bayang-bayang Ghaib

Pertimbangkan contoh yang diberikan dalam soalan asal:

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

Walaupun matlamatnya adalah untuk menggunakan bayang kotak inset di sekeliling bekas, termasuk imej, ia gagal untuk muncul. Mengapa ini berlaku?

Isu Ketelusan Imej

Punca di sebalik bayang-bayang yang hilang pada imej terletak pada ketelusan. Apabila imej mempunyai latar belakang lutsinar, ia pada asasnya adalah tetingkap kepada elemen latar belakang. Dalam kes ini, latar belakang bekas adalah hitam. Akibatnya, bayang sisipan menjadi tidak kelihatan pada kawasan lutsinar imej.

Mengatasi Halangan Ketelusan

Untuk menyelesaikan isu ini, penyelesaian yang mudah dan elegan tersedia: menggunakan CSS : selepas unsur pseudo. Dengan menambahkan elemen pseudo :after pada bekas, kami boleh mencipta lapisan tambahan yang terletak di atas imej dan menerima bayang kotak inset.

Dalam coretan CSS yang dikemas kini di bawah, kami menggunakan pseudo :after elemen ke bekas:

<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 pengubahsuaian ini, bayang kotak inset kini muncul di atas kedua-dua kawasan legap dan lutsinar imej, memberikan kesan bayang-bayang yang diingini.

Atas ialah kandungan terperinci Mengapa Bayang-Kotak Inset Hilang Pada Imej dengan Latar Belakang Lutsinar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!