Bagaimana untuk Memudarkan Teks ke Latar Belakang Menggunakan Topeng Gradien CSS?

Menggunakan Topeng Kecerunan untuk Memudarkan Teks ke Latar Belakang

Pengenalan

Menggabungkan skrin tetapkan imej latar belakang ke dalam div menatal sering memberikan cabaran untuk memudar teks di atasnya dengan lancar sebagai pengguna tatal ke bawah. Artikel ini meneroka penyelesaian menggunakan topeng kecerunan dalam CSS.

Soalan

Bagaimana anda boleh menggunakan topeng kecerunan dalam CSS untuk memudarkan teks ke latar belakang hanya pada sebahagian unsur, mewujudkan pudar beransur-ansur kesan?

Jawapan

Menggunakan sifat -webkit-mask-image Webkit, anda boleh mencapai kesan yang diingini:

-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 linear yang pudar daripada hitam legap di bahagian atas elemen kepada telus di bahagian bawah 10%. Dengan menambahkan padding-bottom: 50% pada elemen, anda boleh memastikan bahawa kandungan hanya pudar apabila ada lagi yang perlu ditatal.

Nota

• Penyelesaian ini memerlukan keserasian penyemak imbas, kerana ia bergantung pada proprietari Webkit -webkit-mask-image hartanah.
• Mozilla (Gecko) mempunyai ciri 'topeng' serupa yang memerlukan imej SVG sebagai input, yang boleh dibenamkan menggunakan pengekodan base64.

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