Bagaimana untuk melaksanakan warna kecerunan fon dalam css3

Kaedah: Gunakan klip latar belakang untuk memaparkan warna latar belakang kecerunan dalam kawasan teks, sintaksnya ialah "elemen teks {background-image:linear-gradient(..);background-clip:text;color: telus;}" .

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

warna kecerunan fon css3

Tiada sifat langsung dalam CSS untuk menetapkan kecerunan teks Biasanya teks hanya boleh menjadi warna pepejal. Walau bagaimanapun, anda boleh menggunakan klip latar belakang untuk menjadikan warna latar belakang muncul dalam kawasan teks Nampaknya teks itu mempunyai kecerunan

<p class="text">为你定制 发现精彩</p>

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
}

Tetapi ini tidak mempunyai kesan dan teks masih kekal. warna lalai

Sebabnya sebenarnya sangat mudah Memandangkan ia adalah latar belakang yang dipangkas, apa yang dipaparkan di hujung sebenarnya ialah warna latar belakang. jadi di sini anda perlu menetapkan warna teks kepada Ketelusan sudah cukup, ia boleh dicapai dengan warna dan -webkit-text-fill-color.

.text{
  background-image: linear-gradient(#FFCF02, #FF7352);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent; /*需要文字透明*/
}

Dengan cara ini anda boleh melihat kesan kecerunan teks

Penerangan kandungan teras:

latar belakang -atribut imej: Tetapkan imej latar belakang kepada warna kecerunan linear Untuk mengetahui lebih lanjut tentang kandungan kecerunan css3, klik di sini

atribut latar belakang: Tentukan kawasan lukisan latar belakang. (Kami perhatikan -webkit- pada atribut ini, menunjukkan bahawa masih terdapat isu keserasian dengan atribut ini. Tidak semua penyemak imbas menyokongnya. Tiada nilai teks dalam W3C. Teks di sini ialah latar belakang yang dipangkas ke teks)

atribut warna: Tetapkan warna teks kepada lutsinar, dan kemudian warna latar belakang di belakangnya akan dipaparkan.

(Mempelajari perkongsian video: tutorial video css, tutorial pengenalan bahagian hadapan web)

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan warna kecerunan fon dalam css3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!