Bagaimanakah Saya Boleh Menukar Warna Teks Secara Dinamik Berdasarkan Warna Latar Belakang dalam Bar Kemajuan?

Teks Diadun Dengan Warna Latar Belakang

Dalam percubaan untuk menggayakan bar kemajuan tersuai, pembangun menghadapi cabaran dalam menukar warna teks secara dinamik berdasarkan warna latar belakang di bawah. Kesan yang diingini ialah teks gelap di atas latar belakang yang terang dan begitu juga sebaliknya.

Pelbagai mod campuran-campuran dan kombinasi warna telah dicuba tidak berjaya. Penyelesaian alternatif Melibatkan penciptaan kecerunan berasingan untuk mewarnakan teks:

.container {
  background: linear-gradient(to right, #43a047 50%, #eee 0);
  text-align: center;
}

.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;
}

Dengan menggunakan kecerunan linear pada elemen teks, warna boleh beralih dengan lancar daripada putih ke hitam berdasarkan kecerunan latar belakang. Teks menjadi lutsinar dan diisi dengan kecerunan yang diingini, menghasilkan kesan gabungan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Warna Teks Secara Dinamik Berdasarkan Warna Latar Belakang dalam Bar Kemajuan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!