Bagaimana untuk Membuat Latar Belakang Telus Tanpa Menjejaskan Kelegapan Teks Merentasi Pelayar?

Cara Mencapai Ketelusan Latar Belakang tanpa Menjejaskan Pelayar Silang Kelegapan Teks

Dalam pembangunan web, mungkin perlu menetapkan elemen div tertentu kepada mempunyai latar belakang telus sambil mengekalkan kelegapan sebarang teks dalam elemen tersebut. Ini boleh dicapai melalui gabungan sifat CSS dan kesan penapis.

Penyelesaian Silang Penyemak Imbas Menggunakan rgba

rgba bermaksud merah, hijau, biru dan alfa, di mana alfa mewakili ketelusan. Begini cara menggunakan rgba untuk mencapai ketelusan latar belakang:

.alpha60 {
    background-color: rgba(0, 0, 0, 0.6);
}

Dalam contoh ini, rgba(0, 0, 0, 0.6) menetapkan warna latar belakang kepada hitam dengan ketelusan 60%.

Fallback untuk Internet Explorer 6 dan 7

Internet Explorer 6 dan 7 tidak menyokong rgba. Untuk menampung penyemak imbas ini, anda boleh menggunakan sifat penapis berikut:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

Pertimbangan Tambahan untuk IE

Dalam Internet Explorer, anda juga mesti mengisytiharkan latar belakang: telus kepada pastikan latar belakangnya telus. Ini boleh dicapai melalui ulasan bersyarat atau kaedah yang serupa.

Contoh Penggunaan

<div class="alpha60">
    <h1>Hello World</h1>
</div>

Rujukan Luar

Untuk selanjutnya maklumat, rujuk luaran berikut sumber:

• http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Atas ialah kandungan terperinci Bagaimana untuk Membuat Latar Belakang Telus Tanpa Menjejaskan Kelegapan Teks Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!