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

Penyesuaian Warna Teks pada Pelbagai Latar Belakang

Dalam mengejar reka bentuk bar kemajuan, anda berusaha untuk melaraskan warna teks secara dinamik berdasarkan asas rona latar belakang. Khususnya, anda menyasarkan teks hitam/kelabu gelap pada latar belakang terang, teks hitam/kelabu gelap pada latar belakang sederhana terang dan teks putih pada latar belakang gelap.

Percubaan awal menggunakan mod campuran campuran dan penapis lain telah terbukti tidak berjaya dalam mencapai kesan yang anda inginkan. Walau bagaimanapun, penyelesaian yang berdaya maju terletak pada menggunakan kecerunan tambahan untuk pewarnaan teks tanpa bergantung pada mod campuran campuran.

Penggayaan CSS Dipertingkat

Laksanakan kod CSS berikut untuk mencapai penyesuaian warna teks yang anda inginkan:

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

HTML Penanda

Dalam elemen .container, letakkan kandungan teks anda dibalut dengan elemen .text:

<div class="container">
  <div class="text">Some text here</div>
</div>

Penjelasan

The kecerunan tambahan dalam .text mewujudkan kecerunan daripada putih kepada hitam, dengan warna lutsinar ditetapkan sebagai isian teks. Ini membolehkan latar belakang asas digabungkan dengan teks, menghasilkan kesan penyesuaian warna yang diingini.

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