Bolehkah Teks Kecerunan Dijana Tanpa Menentukan Setiap Huruf Secara Individu?

Penjana Teks Kecerunan Tanpa Menentukan Setiap Huruf

Soalan:

Adakah terdapat cara untuk menjana teks kecerunan tanpa menyatakan setiap surat? Contohnya, sesuatu seperti di bawah:

.rainbow {
  background-image: linear-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

Tetapi bukan dengan warna pelangi, sebaliknya seperti kecerunan daripada putih ke kelabu.

Jawapan:

Walaupun sintaks yang tepat untuk menentukan hentian warna mungkin berbeza-beza, berikut ialah contoh yang serupa dengan kecerunan putih ke kelabu/biru muda:

.rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>


No rainbow text

Dengan melaraskan hentian warna dan kedudukannya, anda boleh mencipta kecerunan tersuai untuk teks anda tanpa perlu mengekod keras setiap huruf.

Atas ialah kandungan terperinci Bolehkah Teks Kecerunan Dijana Tanpa Menentukan Setiap Huruf Secara Individu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!