Bagaimana untuk Mencapai Kecerunan Opacity dalam CSS?

Melaksanakan Kecerunan Kelegapan dalam CSS

Dalam usaha untuk meniru kesan visual khusus yang melibatkan tindanan pada warna latar belakang dinamik, ramai yang telah mencari penyelesaian kecerunan kelegapan CSS. Walaupun contoh yang diberikan dalam soalan menunjukkan percubaan pada pelaksanaan ini, ia gagal disebabkan oleh kerumitan kod atau pengehadan penyemak imbas.

Syukurlah, kemajuan dalam penyemak imbas telah memungkinkan untuk mencapai kecerunan kelegapan sepenuhnya dalam CSS menggunakan imej topeng harta. Pada masa ini disokong oleh Chrome, Safari, Opera dan semua penyemak imbas kecuali Internet Explorer, harta ini menawarkan penyelesaian serasi yang lebih cekap dan merentas penyemak imbas.

Pelaksanaan CSS:

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

Caranya terletak pada penggunaan kecerunan sebagai topeng itu sendiri, di mana kecerunan itu beralih kepada ketelusan (melalui nilai alfa). Ini membolehkan penciptaan kesan tindanan yang melaraskan secara dinamik berdasarkan warna latar belakang.

Contoh dengan Latar Belakang Pepejal:

[Pautan Demo]

Nota Tambahan:

• Semua sifat imej untuk imej topeng disokong.
• Penopengan CSS hanya tersedia untuk elemen teks dan mungkin tidak berkelakuan seperti yang diharapkan dengan imej.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Kecerunan Opacity dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!