Bagaimanakah Saya Boleh Memudarkan Teks ke Latar Belakang Menggunakan Kecerunan CSS pada Tatal?

Menggunakan Topeng Kecerunan untuk Memudarkan Teks di atas Latar Belakang

Adakah anda mahu teks anda beralih ke latar belakang dengan lancar semasa pengguna menatal? Jika ya, menggunakan topeng kecerunan pada tirai latar di bahagian atas div skrol anda mungkin merupakan penyelesaian yang anda perlukan.

Penyelesaian:

Nasib baik, Webkit menawarkan kemudahan Pilihan CSS untuk ini:

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

Kod ini mencipta kecerunan yang pudar daripada legap (di bahagian atas) kepada telus (10% dari bawah) untuk elemen. Untuk memastikan kandungan hanya pudar apabila menatal, tambahkan padding-bottom: 50%.

Mozilla (Gecko) Fallback:

Pada asalnya, Firefox memerlukan imej topeng SVG, tetapi kini menyokong imej topeng.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memudarkan Teks ke Latar Belakang Menggunakan Kecerunan CSS pada Tatal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!