Bagaimana untuk Mencipta Teks Dwi Warna dalam CSS Tanpa Mendua Kandungan?

Teks Dwi Warna Menggunakan CSS

Timbul persoalan bagaimana untuk mencapai kesan teks di mana satu sisi mempunyai warna dan latar belakang tertentu manakala sebelah lagi mempunyai warna dan latar belakang yang berbeza tanpa menduplikasi kandungan. Contoh yang disediakan mempamerkan kesan ini dengan menggunakan div dengan blok sebaris dan menetapkan lebar, warna latar belakang, limpahan dan ketinggian untuk setiap div. Di dalam div ini, perenggan ditakrifkan dengan lebar 200% dan warna teks yang berbeza.

Walau bagaimanapun, pendekatan ini memerlukan pendua kandungan. Untuk mengelakkan ini, teknik lain boleh digunakan. Background-clip:text Harta CSS datang untuk menyelamatkan. Harta ini membolehkan anda mentakrifkan kawasan tempat latar belakang harus dipaparkan. Dalam kes ini, ia boleh ditetapkan kepada 'teks', yang akan menggunakan latar belakang pada teks itu sendiri.

Dengan teknik ini, anda boleh mencipta latar belakang kecerunan untuk teks, membenarkan kombinasi warna yang berbeza pada kedua-dua sisi . Kod CSS dan HTML berikut menunjukkan pendekatan ini:

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

<div></div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Teks Dwi Warna dalam CSS Tanpa Mendua Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!