Mengapa Kandungan HTML Bertindih Kadangkala Tidak Mengaburkan Latar Belakang Dasar?

Apakah yang Menyebabkan Isu Kandungan Bertindih?

Apabila dua elemen bertindih dalam HTML/CSS, kandungan tidak selalu dilindungi oleh latar belakang elemen bertindih. Ini berlaku kerana susunan lukisan khusus yang dinyatakan dalam model pemaparan CSS.

Tempahan Lukisan CSS

Tertib lukisan CSS menentukan susunan elemen yang dipaparkan secara visual pada halaman web. Ia ditakrifkan oleh satu set peraturan yang menentukan lapisan kandungan yang dicat terlebih dahulu. Berikut ialah gambaran ringkas:

1. Latar belakang elemen akar: Warna latar belakang elemen akar () meliputi keseluruhan kanvas.
2. Latar belakang elemen kanak-kanak: Jika elemen kanak-kanak ialah elemen blok (cth.,
   ), warna latar belakang dan imejnya dilukis di atas latar belakang elemen akar, meliputi keseluruhan lebar dan ketinggian elemen.
3. Sempadan: Sempadan kanak-kanak elemen dilukis di atas latar belakangnya.
4. Kandungan teks: Akhir sekali, kandungan teks kanak-kanak elemen dicat di atas sempadan.

Isu dalam Contoh Yang Disediakan

Dalam contoh yang diberikan, kami mempunyai dua elemen:

1. .box : A
   dengan latar belakang merah.
2. .bawah: Satu lagi
   dengan latar belakang hijau dan jidar negatif digunakan, menyebabkan ia bertindih .box.

   Mengikut susunan lukisan:

   1. Latar belakang putih dicat dahulu, meliputi seluruh halaman.
   2. Latar belakang merah .box dilukis seterusnya, dan memandangkan ia adalah elemen blok, ia meliputi keseluruhan lebar dan ketinggian elemen.
   3. The latar belakang hijau .bawah kemudian dicat, tetapi disebabkan jidar negatif, ia meluncur antara kandungan teks .box dan latar belakangnya.
   4. Kandungan teks daripada kedua-dua elemen adalah yang terakhir dicat.

   Kesimpulan

   Tingkah laku yang diperhatikan adalah hasil daripada susunan lukisan CSS yang telah ditetapkan, yang mengutamakan pemaparan kandungan teks berbanding imej latar belakang atau warna untuk elemen bertindih.