Bolehkah Topeng Kecerunan CSS Memudarkan Teks ke Latar Belakang?

Teks Pudar dengan Topeng Kecerunan dalam CSS

S: Adakah mungkin untuk menggunakan topeng kecerunan dalam CSS untuk memudarkan teks ke latar belakang?

J: Sudah tentu! Menggunakan ciri CSS moden, anda boleh mencipta kesan pudar halus pada teks.

Untuk keserasian maksimum, anda boleh menggunakan sintaks kecerunan Webkit:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

Ini memudar 10% bahagian bawah elemen sambil meninggalkan kawasan atas sepenuhnya legap. Anda boleh melaraskan bahagian bawah padding untuk memastikan bahawa pudar hanya berlaku apabila skrol tersedia.

Untuk keserasian Firefox, anda boleh menggunakan sifat imej topeng dan membenamkan imej SVG berkod base64 dalam helaian gaya anda.

Dengan melaksanakan teknik ini, anda boleh mencapai kesan teks yang diingini yang pudar ke latar belakang apabila pengguna menatal ke bawah, memberikan pengalaman membaca yang estetik.

Atas ialah kandungan terperinci Bolehkah Topeng Kecerunan CSS Memudarkan Teks ke Latar Belakang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!