Bagaimana untuk Mencipta Lubang Telus dalam Tindanan CSS?

Mencipta Lubang dalam Tindanan CSS

Mencipta lubang dalam tindanan untuk mendedahkan elemen tapak web asas boleh dilakukan dengan CSS sahaja. Satu teknik yang berkesan ialah menggunakan sifat bayang-kotak dengan jejari hamparan yang besar.

Untuk mencapai kesan ini:

.hole {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 150px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2); /* Create a transparent hole with a blue border */
}

Bayang-kotak ini menghasilkan segi empat sama lutsinar yang besar dengan biru kecil sempadan. Ia berkesan mencipta lubang dalam tindanan, membolehkan anda melihat kandungan asas. Jejari sebaran 9999px memastikan lubang itu meliputi seluruh kawasan tindanan.

Contoh HTML:

<p>Lorem ipsum dolor sit amet, ocurreret tincidunt philosophia in sea, at pro postea ullamcorper...</p>
<p>Has ex idque repudiandae, an mei munere philosophia. Sale molestie id eos, eam ne blandit adipisci...</p>

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

Kod CSS dan contoh HTML ini menunjukkan cara membuat lubang lutsinar dalam tindanan menggunakan hanya CSS, membolehkan anda melihat elemen tapak web di bawah.

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