Bagaimanakah Saya Boleh Menghalang Elemen Anak Saya daripada Mewarisi Kelegapan?

Linda Hamilton
Lepaskan: 2024-11-06 16:47:02
asal
432 orang telah melayarinya

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>
    Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan