Dalam contoh ini, saya cuba menjadikan elemen induk lebih telus tanpa mengubah kelegapan elemen anak.
<div> <div className="larger-box"> <div className = "smaller-box"> </div> </div>
Ini adalah gaya CSS semasa saya:
.larger-box{ width: 10rem; height: 10rem; background-color: red; } .smaller-box{ width: 2rem; height: 2rem; background-color: green; opacity: 1 !important; }
Adakah mungkin untuk mencapai kesan ini dalam CSS?
Anda boleh menggunakan CSS
not
.Kanak-kanak akan sentiasa dipengaruhi oleh kelegapan ibu bapa mereka, jadi cara paling mudah untuk memberi mereka kelegapan berbeza ialah menjadikan mereka elemen adik-beradik dan meletakkan elemen kedua secara mutlak di atas elemen pertama, justeru Beri setiap elemen kelegapannya sendiri. Sila ambil perhatian kedudukan: relatif kepada div pembalut induk.
Di sini saya mempunyai beberapa teks yang dipaparkan di belakang div merah dengan div hijau di atasnya, seolah-olah ia elemen kanak-kanak, tetapi sebenarnya ia adalah elemen adik beradik dan oleh itu tidak dipengaruhi oleh kelegapan div merah. Jadi teks ditunjukkan melalui div merah, tetapi bukan div hijau.