Rumah > hujung hadapan web > tutorial css > Bolehkah Teks Kecerunan Dijana Tanpa Menentukan Setiap Huruf Secara Individu?

Bolehkah Teks Kecerunan Dijana Tanpa Menentukan Setiap Huruf Secara Individu?

Patricia Arquette
Lepaskan: 2024-11-22 10:55:11
asal
778 orang telah melayarinya

Can Gradient Text Be Generated Without Defining Each Letter Individually?

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;
}
Salin selepas log masuk
<span class="rainbow">Rainbow text</span>
Salin selepas log masuk

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;
}
Salin selepas log masuk
<span class="rainbow">Rainbow text</span>

No rainbow text
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan