Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Latar Belakang Telus Tanpa Menjejaskan Kelegapan Teks Merentasi Pelayar?

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

Linda Hamilton
Linda Hamiltonasal
2025-01-05 08:34:58763semak imbas

How to Make a Transparent Background Without Affecting Text Opacity Across Browsers?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn