Bagaimana untuk Mencipta Latar Belakang Pudar Tanpa Menjejaskan Keterlihatan Elemen Kanak-kanak Menggunakan HTML/CSS?

Manipulasi Kelegapan tanpa Menjejaskan Elemen Kanak-kanak Menggunakan HTML/CSS

Masalah:

Melaksanakan kesan pudar untuk latar belakang semasa memastikan elemen kanak-kanak kelihatan boleh mencabar menggunakan kelegapan sahaja. Ini ditemui apabila cuba mencipta kotak pop timbul yang menyerlahkan dirinya dengan meredupkan kandungan asas.

Penyelesaian:

Untuk mencapai kesan yang diingini, gabungkan kelegapan dengan warna latar belakang seperti 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>

Dengan menetapkan sifat latar belakang dengan nilai rgba, anda menentukan kelegapan bekas, yang mewakili kandungan di belakang kotak pop timbul, sambil mengekalkan keterlihatan elemen #box. Nilai rgb mewakili warna, manakala nilai a menunjukkan tahap ketelusan.

Untuk menggunakan pendekatan ini, laksanakan kod CSS yang disediakan dan sertakan HTML berikut:

<code class="html"><div id="container">
    container text
    <div id="box">
        box text
    </div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Pudar Tanpa Menjejaskan Keterlihatan Elemen Kanak-kanak Menggunakan HTML/CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!