Bagaimana untuk Mencipta Kecerunan Kelegapan CSS Menggunakan Topeng?

Kecerunan Kelegapan CSS

Objektifnya adalah untuk mencipta kesan berasaskan CSS yang menyerupai contoh yang disediakan, di mana tindanan dengan kecerunan digunakan atas latar belakang dengan warna dinamik.

Menggunakan Topeng CSS

Dalam CSS, anda boleh mencapai ini menggunakan topeng. Walaupun sokongan penyemak imbas untuk kaedah ini masih terhad, versi moden Chrome, Safari dan Opera menyokong sifat yang diperlukan (-webkit-mask-image dan -webkit-mask-size antara lain).

Kuncinya ialah untuk mencipta topeng yang merupakan kecerunan itu sendiri, bermula dengan kelegapan lengkap (kelihatan) dan berakhir dengan ketelusan (tidak kelihatan). Ini akan menghasilkan kesan kecerunan pada kandungan di bawahnya.

Pelaksanaan Kod

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)));
}

Contoh Penggunaan

CSS ini boleh digunakan pada elemen perenggan untuk memaparkan teks dengan kesan kecerunan:

<p>This is a paragraph with a CSS opacity gradient.</p>

Dalam contoh ini, teks akan dipaparkan dalam warna merah dalam kecerunan yang pudar daripada legap di sebelah kiri kepada telus pada yang betul. Ketelusan membolehkan warna latar belakang ditunjukkan semasa anda bergerak ke kanan.

Perlu ambil perhatian bahawa warna elemen latar belakang perlu ditetapkan untuk melihat kesan kecerunan kelegapan. Dalam contoh yang disediakan, warna latar belakang adalah biru muda:

  <p>This is a paragraph with a CSS opacity gradient.</p>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Kecerunan Kelegapan CSS Menggunakan Topeng?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!