Mengapa Elemen Kanak-kanak Mewarisi Kelegapan Daripada Ibu Bapa Mereka, dan Bagaimana Saya Boleh Menghalangnya?

Menyelesaikan Pewarisan Kelegapan untuk Elemen Anak

Apabila menggunakan kelegapan pada elemen induk, anda mungkin menghadapi isu unsur anak yang mewarisi kelegapan ini. Ini boleh menjadi tidak diingini jika anda ingin elemen anak mengekalkan kelegapan asalnya.

Bertentangan dengan andaian biasa, isu ini bukan disebabkan oleh warisan semata-mata. Sebaliknya, ia berpunca daripada cara kelegapan dikira. Pertimbangkan contoh berikut:

<div id="parent">
    <div></div>
</div>

<div id="original"></div>

<div id="quarter"></div>

#parent div, #quarter {
    width: 100px;
    height: 100px;
    background-color: orange;
}

#parent div {
    opacity: 0.5;
}

#parent {
    opacity: 0.5;
}

#quarter {
    opacity: 0.25;
}

Walaupun nampaknya kelegapan #quarter adalah bersamaan dengan #parent div, #parent div sebenarnya mempunyai dua kali ganda kelegapan #quarter. Ini jelas dalam biola berikut: https://jsfiddle.net/HUaNm/.

Penyelesaian

Satu-satunya penyelesaian yang benar untuk isu ini adalah dengan memindahkan secara fizikal elemen anak di luar ibu bapa. Sebagai alternatif, anda boleh mempertimbangkan untuk menggunakan warna rgba untuk latar belakang, jidar atau fon ibu bapa dan bukannya kelegapan, walaupun kesannya akan berbeza.

Atas ialah kandungan terperinci Mengapa Elemen Kanak-kanak Mewarisi Kelegapan Daripada Ibu Bapa Mereka, dan Bagaimana Saya Boleh Menghalangnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!