Bagaimanakah Saya Boleh Membuat Warna Teks Secara Dinamik Melaraskan Sebarang Warna Latar Belakang?

Warna Latar Belakang Bertindih Teks

Dalam reka bentuk web, mencapai warna teks yang melengkapkan latar belakang dengan lancar selalunya diingini. Ini amat relevan untuk bar kemajuan, di mana teks mungkin perlu berkontras dengan warna latar belakang yang berbeza-beza.

Penghadan Mod Campuran Campuran

Pada mulanya, anda cuba menggunakan campuran -blend-mode: perbezaan untuk mengubah warna teks. Walaupun teknik ini boleh memberikan kesan campuran warna, ia tidak menawarkan kawalan sepenuhnya ke atas pelarasan warna dan mungkin tidak selalu menghasilkan hasil yang diingini.

Pendekatan Kecerunan

Lebih dipercayai penyelesaian melibatkan mencipta latar belakang kecerunan untuk teks. Kecerunan ini menggabungkan kedua-dua warna teks dan warna latar belakang yang diingini.

.text {
  background: linear-gradient(to right, white 50%, black 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
}

Kecerunan ini mentakrifkan peralihan daripada putih kepada hitam, memastikan teks tindanan dengan baik pada latar belakang terang dan gelap.

Hasil

Dengan kecerunan ini digunakan, teks akan melaraskan secara automatik warnanya untuk digabungkan dengan lancar pada mana-mana julat warna. Kaedah ini lebih serba boleh dan boleh dipercayai daripada mod campuran campuran untuk memastikan keterlihatan dan kebolehbacaan teks.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Warna Teks Secara Dinamik Melaraskan Sebarang Warna Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!