Bagaimana untuk Mencegah Elemen Anak daripada Mewarisi Kelegapan daripada Elemen Induk dalam CSS?

Mengatasi Kelegapan Diwarisi untuk Elemen Kanak-kanak

Dalam pembangunan web, menetapkan kelegapan untuk elemen induk boleh menjejaskan elemen anaknya juga. Walau bagaimanapun, terdapat senario yang anda mungkin mahu menghalang pewarisan ini untuk elemen anak tertentu.

Pertimbangkan kod berikut:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  opacity: 0.6;
}

Dalam kes ini, elemen anak juga akan mempunyai kelegapan daripada 0.6, walaupun anda mahu ia kekal legap sepenuhnya. Bagaimanakah kita boleh mengatasinya?

Memahami Pengiraan Opacity

Adalah penting untuk memahami cara kelegapan dikira dalam CSS. Hanya menetapkan kelegapan elemen anak kepada 1 tidak akan membatalkan kelegapan yang diwarisi. Ini kerana kelegapan dikira sebagai hasil daripada kelegapan kanak-kanak dan kelegapan unsur moyangnya.

Sebagai contoh, jika elemen induk mempunyai kelegapan 0.5 dan elemen anak mempunyai kelegapan 1, kelegapan berkesan elemen kanak-kanak masih akan menjadi 0.5.

Penyelesaian

1. Pindahkan Anak Daripada Ibu Bapa:

Penyelesaian yang paling mudah ialah membuang unsur anak daripada keturunan langsung ibu bapa. Dengan berbuat demikian, ia tidak lagi akan mewarisi kelegapan ibu bapa.

2. Gunakan Warna RGBA:

Daripada kelegapan, pertimbangkan untuk menggunakan warna RGBA untuk latar belakang atau sempadan elemen induk. Warna RGBA membolehkan anda menentukan nilai alfa (transparensi) dan RGB (warna). Dengan melaraskan nilai alfa, anda boleh mencapai kesan yang serupa kepada kelegapan tanpa menjejaskan elemen anak.

Kaveat:

Sementara penyelesaian ini menyelesaikan isu kelegapan yang diwarisi, ia tetap perlu diperhatikan bahawa mereka mempunyai batasan mereka. Mengalihkan elemen anak keluar daripada induk boleh mengubah reka letak atau kefungsian halaman anda dan menggunakan warna RGBA mungkin tidak memberikan penampilan visual yang sama seperti kelegapan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Elemen Anak daripada Mewarisi Kelegapan daripada Elemen Induk dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!