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

Menggunakan Topeng Kecerunan untuk Memudarkan Teks ke Latar Belakang

Pereka web sering menghadapi cabaran mencipta teks yang digabungkan secara visual dengan imej latar belakang tetap. Satu penyelesaian yang berkesan ialah menggunakan topeng kecerunan yang memudarkan teks ke arah latar belakang di bahagian atas div penatalan.

Untuk mencapai kesan ini, penyemak imbas Webkit menawarkan penyelesaian CSS yang mudah:

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

Barisan kod ini memudar 10% bahagian bawah elemen tanpa bergantung pada imej. Untuk memastikan bahawa kandungan hanya pudar apabila ada lagi yang perlu ditatal, pertimbangkan untuk menambah padding-bottom: 50%.

Dalam penyemak imbas yang menyokong topeng CSS, seperti Firefox dan versi moden Microsoft Edge, sintaks berikut ialah diutamakan:

mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);

Kod ini mencipta topeng kecerunan menegak yang memudar bahagian bawah elemen, mendedahkan latar belakang imej.

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