Bagaimanakah anda boleh mencapai teks dwi-warna dengan CSS tanpa menduplikasi kandungan?

Mencapai Teks Dwi Warna dengan CSS

Pertanyaan Awal:

Bagaimana anda boleh mencapai kesan teks dengan berbeza warna pada setiap sisi tanpa menduplikasi kandungan?

Konvensional Pendekatan:

Kaedah biasa melibatkan mencipta dua elemen teks yang berasingan dan meletakkannya bersebelahan, masing-masing dengan latar belakang dan warna latar depan yang unik.

Penyelesaian Alternatif:

Untuk meminimumkan pertindihan kandungan, pertimbangkan untuk memanfaatkan sifat CSS seperti background-clip:text. Sifat ini membenarkan anda menggunakan kecerunan pada teks itu sendiri, membolehkan perkara berikut:

Pelaksanaan CSS:

#main {
  background: linear-gradient(to right, red 50%, #fff 50%);
}

#main > p {
  background: linear-gradient(to left, blue 50%, #fff 50%);
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

Struktur HTML:

<div>

Penjelasan:

• Kecerunan digunakan pada elemen #utama, yang merangkumi teks.

• elemen mempunyai kecerunan terbalik yang digunakan pada latar belakangnya, yang ditetapkan sebagai warna latar belakang teks.

• Sifat background-clip:text mengehadkan kecerunan latar belakang kepada kawasan teks.
• -webkit- text-fill-color: lutsinar memastikan teks telus, membenarkan kecerunan latar belakang ditunjukkan.

Teknik ini mencipta kesan teks dwi-warna tanpa memerlukan kandungan pendua. Dengan menggunakan kesan gabungan, ia mencapai peralihan yang lancar antara warna tanpa memerlukan elemen teks tambahan.

Atas ialah kandungan terperinci Bagaimanakah anda boleh mencapai teks dwi-warna dengan CSS tanpa menduplikasi kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!