Bagaimana untuk Menjadikan Warna Latar Belakang Lutsinar Sambil Mengekalkan Teks Legap?

Kelegapan untuk Warna Latar Belakang tanpa Mempengaruhi Teks

Dalam dunia pembangunan web, mencapai ketelusan selalunya penting untuk meningkatkan daya tarikan visual dan fungsi elemen laman web. Satu keperluan biasa ialah menggunakan ketelusan pada latar belakang div sambil mengekalkan kelegapan teks yang disertakan. Ini boleh menimbulkan cabaran, terutamanya dalam memastikan keserasian merentas pelayar.

Penyelesaian rgba

Penyelesaian yang paling berkesan dan disokong secara meluas ialah menggunakan 'RGBA' ( Merah, Hijau, Biru, Alpha). Berikut ialah contoh:

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

Sifat 'rgba' menentukan warna latar belakang serta saluran alfa atau ketelusannya. Dalam kes ini, latar belakang ditetapkan kepada hitam dengan kelegapan 60%. Pendekatan ini akan berfungsi dalam kebanyakan penyemak imbas moden.

IE Fallbacks

Untuk mencapai keserasian merentas penyemak imbas, termasuk versi Internet Explorer yang lebih lama, peraturan CSS tambahan diperlukan:

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Harta 'rgb' menetapkan warna latar belakang sandaran untuk IE, manakala 'penapis' dan Sifat '-ms-filter' menggunakan ketelusan dalam versi 5.5 hingga 7 dan 8, masing-masing.

Nota untuk Penyemak Imbas IE

Untuk memastikan ketelusan, adalah penting untuk mengisytiharkan ' background: transparent' dalam sandaran CSS untuk IE. Ini memastikan warna latar belakang kekal telus walaupun sokongan saluran alfa tidak tersedia.

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Warna Latar Belakang Lutsinar Sambil Mengekalkan Teks Legap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!