Bolehkah Anda Mempunyai Teks Dwi Warna Tanpa Penduaan Kandungan?

Mencapai Kesan Teks Dwi Warna Tanpa Pertindihan Kandungan

Cabaran mencipta teks dengan warna berbeza pada sisi yang bertentangan menimbulkan persoalan sama ada ia mungkin untuk mencapai kesan ini tanpa menduplikasi kandungan.

Kecerunan Latar Belakang dan Keratan Teks

Satu penyelesaian melibatkan penggunaan sifat background-clip:text CSS. Dengan mencipta kecerunan linear di latar belakang, anda boleh mewarnakan teks dengan peralihan yang lancar antara dua warna. Menggabungkan ini dengan background-clip:text mengehadkan latar belakang kepada teks itu sendiri, membenarkan kandungan asas dipaparkan.

Kod Contoh:

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

Isi Teks Lutsinar

Warna-isi-teks-webkit: lutsinar; dan warna: telus; sifat menjadikan warna teks telus, membolehkan warna latar belakang dipaparkan sepenuhnya.

Kaedah ini menghapuskan keperluan untuk penduaan kandungan sambil membolehkan teks mempunyai warna yang berbeza pada sisi yang bertentangan. Teknik ini menggunakan kesan gabungan CSS untuk mencipta paparan teks yang menarik secara visual dan dinamik.

Atas ialah kandungan terperinci Bolehkah Anda Mempunyai Teks Dwi Warna Tanpa Penduaan Kandungan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!