Bagaimana untuk Mencapai Kelegapan Terpilih dalam Bekas Tanpa Menjejaskan Elemen Kanak-kanak?

Mencapai Kelegapan Selektif dalam HTML/CSS

Apabila mencipta elemen visual pada halaman web, mengawal kelegapan adalah penting. Walau bagaimanapun, mencapai kelegapan tanpa menjejaskan elemen kanak-kanak boleh menjadi mencabar. Soalan ini meneroka teknik untuk menggunakan kelegapan pada bekas tanpa menjejaskan keterlihatan kandungannya.

Kesan yang diingini ialah kotak pop timbul yang diletakkan di atas kandungan halaman web, dengan kandungan latar belakang sebahagiannya kelihatan dengan mengurangkan kelegapannya. Penanya cuba menggunakan kelegapan pada bekas, tetapi kelegapan turut mempengaruhi elemen anak, menyebabkan kedua-duanya telah mengurangkan kelegapan.

Untuk mengatasi isu ini, anda boleh menggunakan gabungan kelegapan dan warna latar belakang. Dengan menetapkan warna latar belakang bekas kepada nilai rgba dengan komponen kelegapan (cth., rgba(56,255,255,0.1)), anda boleh mengurangkan kelegapannya sambil mengekalkan keterlihatan elemen anak. Ini membolehkan anda mencipta kesan kotak pop timbul dengan latar belakang separa legap.

<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);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>
</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kelegapan Terpilih dalam Bekas Tanpa Menjejaskan Elemen Kanak-kanak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!