Bagaimanakah Saya Boleh Melaraskan Warna Teks Secara Dinamik Berdasarkan Latar Belakang Kecerunan dalam CSS?

Penggabungjalinan Teks Pada Warna Latar Belakang

Anda menyasarkan untuk menggayakan bar kemajuan dengan warna sebelah kiri yang berbeza-beza dan warna teks harus dilaraskan secara dinamik berdasarkan latar belakang asas.

Percubaan Campuran-Mod

Anda pada mulanya bereksperimen dengan mix-blend-mode: perbezaan untuk menggabungkan warna teks dengan latar belakang, tetapi ia terbukti tidak berjaya. Anda juga mempertimbangkan untuk menggunakan penapis: grayscale(1) contrast(9);, tetapi itu tidak menghasilkan kesan yang diingini sama ada.

Penyelesaian Gradien

Penyelesaian yang berkesan terletak pada mencipta kecerunan tambahan untuk mewarnakan teks. Dengan menggunakan kaedah ini, anda menghapuskan keperluan untuk mod campuran-campur.

Kod CSS tersuai mencapai penggantian kecerunan ini:

.container {
  width: 200px;
  height: 20px;
  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;
}

Pendekatan ini memastikan peralihan warna teks antara hitam ( di bahagian kiri yang lebih gelap) dan putih (di bahagian kiri yang lebih terang).

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