Bagaimanakah Anda Boleh Mencipta Tindanan dengan Lubang Menggunakan CSS?

Mencipta Lubang dalam Tindanan Menggunakan CSS

Soalan:

Bagaimana anda boleh membuat tindanan dengan lubang, membenarkan keterlihatan kandungan tapak web asas?

Jawapan:

Membuat lubang dalam tindanan menggunakan CSS sahaja memang boleh dilakukan. Begini cara anda boleh mencapai ini:

Menggunakan CSS Box-Shadow:

1. Tentukan kelas CSS baharu, seperti .hole.
2. Tetapkan sifat bayang-kotak untuk kelas ini dengan jejari sebaran yang besar. Jejari hamparan mentakrifkan saiz "lubang" yang anda ingin buat.
3. Tetapkan kedudukan dan dimensi yang sesuai untuk elemen .hole untuk menentukan di mana anda mahu memaparkan lubang.

Sebagai contoh, kod CSS berikut mencipta lubang dalam tindanan:

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

Dalam kod ini, lubang diletakkan 20 piksel dari bahagian atas dan tepi kiri tindanan, dengan lebar 200 piksel dan ketinggian 150 piksel. Sifat bayang-kotak menghasilkan bayang-bayang besar dengan jejari sebaran 9999px, dengan berkesan menutup tindanan dan mendedahkan kandungan asas.

Contoh Kod:

<p>Overlay content...</p>

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

<p>Underlying content...</p>

Kod ini akan memaparkan kandungan tindanan sambil membenarkan anda melihat kandungan asas melalui "lubang" yang ditakrifkan oleh elemen .hole.

Nota:

Pendekatan ini membenarkan anda untuk mencipta pelbagai kesan lubang, daripada kawasan lutsinar ringkas kepada reka bentuk yang lebih kompleks dan menarik secara visual, meningkatkan pengalaman pengguna dan menambahkan sentuhan kesenian pada aplikasi web anda.

Atas ialah kandungan terperinci Bagaimanakah Anda Boleh Mencipta Tindanan dengan Lubang Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!