Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah Saya Boleh Menghalang Elemen Anak Saya daripada Mewarisi Kelegapan?

Bagaimanakah Saya Boleh Menghalang Elemen Anak Saya daripada Mewarisi Kelegapan?

Linda Hamilton
Linda Hamiltonasal
2024-11-06 16:47:02428semak imbas

How Can I Prevent My Child Elements from Inheriting Opacity?

Memahami Kelegapan dan Warisan Latar Belakang CSS

Dalam CSS, sifat kelegapan mengawal ketelusan sesuatu elemen. Secara lalai, kelegapan ditetapkan kepada 1.0, yang bermaksud elemen itu adalah legap sepenuhnya. Nilai kelegapan yang lebih rendah menunjukkan ketelusan yang semakin meningkat.

Apabila berbilang elemen bersarang mempunyai nilai kelegapan yang berbeza, elemen anak mewarisi kelegapan elemen induknya. Ini bermakna melainkan anda menyatakan sebaliknya secara eksplisit, semua kanak-kanak elemen dengan kelegapan berkurangan juga akan mempunyai kelegapan berkurangan yang sama.

Menangani Isu dengan Kelegapan Diwarisi

Dalam kod yang disediakan, walaupun div dalam mempunyai kelegapan 1.0, ia muncul dengan kelegapan 0.4 kerana ia mewarisi set kelegapan pada div induknya. Untuk menyelesaikan isu ini, terdapat beberapa pilihan:

  • Gunakan Imej PNG Lutsinar: Untuk imej latar belakang, pertimbangkan untuk menggunakan fail PNG yang sememangnya separa lutsinar (cth. , telah mengurangkan kelegapan). Ini akan memastikan latar belakang telus dengan betul sambil mengekalkan kelegapan penuh teks.
  • Gunakan Warna RGBA: Untuk warna latar belakang, anda boleh menggunakan RGBA (Merah, Hijau , Biru, Alfa). Alpha mewakili ketelusan, di mana 0 adalah telus sepenuhnya dan 255 adalah legap sepenuhnya. Dengan menentukan nilai RGBA dengan komponen alfa kurang daripada 255, anda boleh mencapai latar belakang lut sinar sambil mengekalkan teks legap sepenuhnya. Contohnya:

    <code class="css">div {
    background-color: rgba(0, 0, 0, 0.5); /* 50% faded black background */
    }</code>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghalang Elemen Anak Saya daripada Mewarisi Kelegapan?. 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