Bagaimana untuk Mencipta Lubang Lihat Melalui dalam Tindanan CSS Tanpa JavaScript?

Mencipta Lubang Tembus dalam Tindanan dengan CSS

Apabila bekerja dengan tindanan, adalah wajar untuk membuat bahagian telus di dalamnya, membenarkan penonton untuk melihat melalui halaman web asas. Kesan ini boleh dicapai semata-mata melalui CSS, menghapuskan keperluan untuk JavaScript.

Satu kaedah yang berkesan melibatkan penggunaan sifat kotak-bayang dengan jejari sebaran yang sangat besar. Dengan berbuat demikian, anda pada asasnya mencipta bayang-bayang luas yang bertindih dengan elemen asas, dengan berkesan mengaburkannya.

Untuk menggambarkan teknik ini, pertimbangkan kod CSS berikut:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

Apabila digunakan pada Elemen HTML, kod ini akan menghasilkan lubang lutsinar dalam tindanan, seperti yang boleh dilihat dalam contoh berikut:

HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper. Mea ei aeque feugiat, cum ut utinam conceptam, in pro partem veritus molestiae. Omnis efficiantur an eum, te mel quot perpetua. Ad duo autem dolore, vocent lucilius te cum, ut duo quem singulis.</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci. Ei eam ipsum dissentiunt. Ei vel accusam dolores efficiantur.</p>

<div class="hole"></div>

Kesimpulannya, menggunakan bayang-kotak dengan besar jejari sebaran menawarkan cara yang mudah dan berkesan untuk mencipta lubang lutsinar dalam tindanan CSS, membolehkan kesan dinamik dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Lubang Lihat Melalui dalam Tindanan CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!