Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menggunakan Kelegapan pada Elemen Induk Tanpa Menjejaskan Anaknya?

Bagaimanakah Saya Boleh Menggunakan Kelegapan pada Elemen Induk Tanpa Menjejaskan Anaknya?

Patricia Arquette
Patricia Arquetteasal
2024-12-14 18:12:14626semak imbas

How Can I Apply Opacity to a Parent Element Without Affecting its Child?

Kelegapan dalam Elemen Induk tanpa Mempengaruhi Anak

Soalan asal mencari penyelesaian untuk menggunakan kelegapan pada elemen induk tanpa menjejaskan kelegapan elemen induknya unsur kanak-kanak. Ini boleh mencabar kerana secara lalai, kelegapan yang digunakan pada induk juga akan mempengaruhi mana-mana elemen anak.

Walau bagaimanapun, teknik yang biasa digunakan melibatkan penggunaan fungsi rgba() dalam CSS, yang membolehkan anda menentukan warna dengan nilai kelegapannya. Untuk mencapai hasil yang diingini, anda boleh menetapkan warna latar belakang elemen induk menggunakan rgba() dengan nilai kelegapan telus. Contohnya:

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

Dalam contoh ini, elemen induk akan mempunyai latar belakang hitam lutsinar 50%, manakala elemen anak tidak akan terjejas dan akan mengekalkan warna asalnya, seperti yang ditunjukkan di bawah:

<div class="parent">
  <div class="child">Hello, I am a child</div>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Kelegapan pada Elemen Induk Tanpa Menjejaskan Anaknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn