Bagaimana untuk Mencipta Gradien Kelegapan Dinamik dalam CSS untuk Tindanan Teks?

Mencipta Kecerunan Kelegapan dalam CSS

Walaupun mempunyai warna latar belakang yang dinamik, matlamatnya adalah untuk mencipta kesan yang sebahagiannya mengaburkan teks sambil menghormati latar belakang. Walaupun tindanan putih berfungsi untuk latar belakang statik, kecerunan kelegapan CSS diperlukan untuk latar belakang dinamik.

Menggunakan Imej Topeng CSS

Pelayar moden (Chrome, Safari, Opera) sokongan menggunakan imej topeng CSS untuk mencipta kesan yang diingini. Kuncinya ialah untuk menentukan topeng yang menggabungkan kecerunan yang beralih kepada ketelusan:

<code class="CSS">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

Di mana rgba(0,0,0,1) mewakili kelegapan penuh dan rgba(0,0,0,0 ) mewakili ketelusan penuh.

Demo dan Keserasian

Lihat demo untuk melihat kesan dalam tindakan.

Perhatikan bahawa teknik ini bergantung pada sifat imej topeng, yang mempunyai sokongan terhad dalam pelayar lama. Firefox, khususnya, kini menyokong topeng SVG.

Untuk maklumat lanjut dan butiran keserasian penyemak imbas, rujuk Caniuse: https://caniuse.com/?search=mask-image

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Gradien Kelegapan Dinamik dalam CSS untuk Tindanan Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!