Mengapa Inset Box-Shadow Tidak Berfungsi Pada Imej, dan Bagaimana untuk Membetulkannya?

Imej Kotak-Bayang-Inset Tidak Bertindih: Dilema Selesai

Bayang-kotak Inset ialah alat yang berkuasa untuk mencipta kedalaman dan penekanan dalam reka bentuk web. Walau bagaimanapun, ia boleh menghadapi cabaran apabila digunakan pada imej. Artikel ini mengkaji sebab inset box-shadow tidak berfungsi pada imej dan membentangkan penyelesaian menggunakan CSS :after pseudo element.

Masalahnya

Apabila menggunakan inset box-shadow pada bekas yang mengandungi imej, bayang mungkin tidak muncul di atas imej itu sendiri. Sebaliknya, bayang-bayang hanya akan menjejaskan latar belakang bekas. Ini boleh mencipta ilusi bahawa imej terapung di atas bayang-bayang.

Penjelasan

Sebab bagi kelakuan ini terletak pada mekanisme pemaparan pelayar web. Bayang kotak sisipan digunakan pada latar belakang elemen, yang biasanya merupakan warna pepejal atau kecerunan. Apabila imej diletakkan dalam elemen, penyemak imbas menganggap imej itu sebagai elemen berasingan dengan latar belakang bebasnya sendiri. Akibatnya, bayang kotak sisipan tidak akan menjejaskan latar belakang imej.

Penyelesaian: CSS :selepas Elemen Pseudo

Untuk mengatasi cabaran ini, kita boleh menggunakan elemen pseudo :selepas. Dengan menambahkan elemen pseudo :after pada bekas dan menggunakan bayang-bayang kotak sisipan padanya, kita boleh mencipta lapisan baharu yang akan menindan imej.

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

Kod CSS ini mencipta elemen pseudo :after dengan lebar dan tinggi yang sama dengan bekas. Ia diletakkan sepenuhnya di dalam bekas dan diletakkan di bahagian atas. Bayang kotak sisipan digunakan pada elemen pseudo :after, memastikan ia bertindih dengan imej.

Atas ialah kandungan terperinci Mengapa Inset Box-Shadow Tidak Berfungsi Pada Imej, dan Bagaimana untuk Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!