Bagaimana untuk Mengekalkan Kelegapan Elemen Kanak-kanak Apabila Menetapkan Kelegapan Kontena dalam HTML/CSS?

Mengekalkan Kelegapan Elemen Kanak-kanak dalam HTML/CSS

Matlamat anda ialah untuk mencipta kotak pop timbul yang muncul di bahagian atas halaman, dengan kandungan latar belakang pudar untuk menyerlahkannya . Walau bagaimanapun, anda menghadapi masalah apabila menetapkan kelegapan bekas kepada 0.3 menyebabkan kedua-dua div menjadi lut sinar.

Penyelesaian: Menggunakan Warna Latar Belakang dengan Kelegapan

Untuk mencapai kesan yang diingini, gunakan kelegapan dalam berganding dengan warna latar belakang. Pertimbangkan kod berikut:

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
</code>

Dalam kod ini, pendekatan yang sedikit berbeza diambil:

• Elemen #container ditetapkan untuk mempunyai sempadan emas dan separa lutsinar latar belakang dengan kelegapan yang ditentukan.
• Elemen #box, yang mewakili kotak pop timbul, diberikan jidar perak dan latar belakang separa lutsinar dengan berbeza kelegapan yang ditentukan.

Dengan menggunakan warna latar belakang dengan kelegapan, anda boleh mengawal ketelusan bekas sambil mengekalkan kelegapan elemen anak. Ini membolehkan kotak pop timbul menonjol dengan latar belakang pudar.

Atas ialah kandungan terperinci Bagaimana untuk Mengekalkan Kelegapan Elemen Kanak-kanak Apabila Menetapkan Kelegapan Kontena dalam HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!