Bagaimanakah saya boleh membuat lubang dalam tindanan untuk mendedahkan kandungan di bawahnya menggunakan CSS sahaja?

Lubang Lapisan Topeng dalam CSS

Mencipta lapisan topeng pada tapak web dan memelihara keterlihatan kandungan asas adalah keperluan biasa. Artikel ini meneroka cara untuk mencapai kesan ini dengan CSS tulen.

Soalan

Bagaimana untuk membuat lubang pada lapisan topeng supaya pengguna dapat melihat kandungan laman web asas melalui lapisan topeng?

Penyelesaian CSS

Gunakan sifat bayangan kotak untuk mencipta lubang dalam lapisan topeng. Sifat ini membenarkan penciptaan bayang-bayang di sekeliling elemen, menyebarkan bayang-bayang yang sangat besar boleh mencipta kawasan yang pada dasarnya telus.

box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);

Seperti yang ditunjukkan di atas, kami menetapkan jejari pengembangan kepada nilai yang sangat besar (9999px). Ini akan mencipta bayang yang meliputi hampir keseluruhan lapisan topeng, sambil mengekalkan kawasan lutsinar di tengah lapisan topeng.

Contoh Kod

#underground {
  background-color: #725;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

#overlay #center {
  width: 400px;
  height: 200px;
  background-color: #ABD;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -200px;
  border-width: 100%;
  border-color: #FFF;
  border-style: solid;
  box-shadow: 0 0 0 9999px rgba(0, 0, 255, 0.2);
}

<div>

Kesimpulan

Dengan menggunakan sifat kotak-bayang, kami berjaya mencipta lubang dalam lapisan topeng. Teknik ini memberikan pembangun kelonggaran untuk mencipta lapisan topeng sambil mengekalkan keterlihatan kandungan asas, mengembangkan kemungkinan CSS.

Atas ialah kandungan terperinci Bagaimanakah saya boleh membuat lubang dalam tindanan untuk mendedahkan kandungan di bawahnya menggunakan CSS sahaja?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!