Panduan sifat penapisan CSS: penapis dan skala kelabu

Panduan atribut penapis CSS: penapis dan skala kelabu

Pengenalan:
Atribut penapis (penapis) dalam CSS boleh menambah pelbagai kesan dan kesan khas pada halaman web, menjadikan halaman lebih kaya dan menarik. Antaranya, skala kelabu ialah kesan penapis yang biasa digunakan yang boleh menukar imej kepada ton hitam dan putih. Dalam artikel ini, kami akan memperkenalkan penggunaan atribut penapis dan contoh kod, terutamanya untuk pelaksanaan kesan skala kelabu.

1. Pengenalan kepada atribut penapis:
Atribut penapis ialah atribut baharu CSS3, yang membolehkan kami melakukan pemprosesan imej dan kesan khas semasa memaparkan elemen. Dengan menggunakan atribut penapis, kami boleh memproses imej dengan kesan kabur, skala kelabu, kecerahan, kontras dan kesan lain. Atribut penapis boleh digunakan pada semua elemen, termasuk imej, teks, latar belakang, dsb.

2. Sintaks dan atribut biasa atribut penapis:
Sintaks asas atribut penapis adalah seperti berikut:

element {
    filter: none | <filter-function> [<filter-parameter>]* | initial | inherit;
}

Fungsi atribut penapis yang biasa digunakan ialah:

1. kabur: Kaburkan imej, nilainya ialah piksel atau peratusan.
2. kecerahan: Laraskan kecerahan imej, nilai ialah peratusan.
3. kontras: Laraskan kontras imej, nilai ialah peratusan.
4. skala kelabu: Tukar imej kepada skala kelabu, nilainya ialah peratusan.
5. terbalikkan: Terbalikkan imej, nilai ialah peratusan.
6. sepia: Tukar imej kepada sepia, nilai ialah peratusan.
7. tepu: Perubahan ketepuan, nilai ialah peratusan.
8. opacity: Tetapkan ketelusan elemen, nilai ialah peratusan.

3. Contoh kod:
Berikut ialah contoh kod beberapa kesan penapis yang biasa digunakan:

1. Kesan skala kelabu (skala kelabu):

   img {
    filter: grayscale(100%);
   }

   Salin selepas log masuk

2. Kesan kabur

Kesan blur (kabur):
3. ( kecerahan):

   element {
    filter: blur(5px);
   }

   Salin selepas log masuk

4. kesan pelarasan kontras (kontras):

   element {
    filter: brightness(80%);
   }

   Salin selepas log masuk

5. kesan terbalik (terbalik):

   element {
    filter: contrast(120%);
   }

   Salin selepas log masuk

6. kesan sepia (sepia) (berubah tepu)
   kejenuhan :

element {
 filter: invert(100%);
}

Salin selepas log masuk

7. Kesan pelarasan ketelusan elemen (kelegapan):

element {
 filter: sepia(100%);
}

Salin selepas log masuk

8. Di atas hanyalah beberapa contoh kesan penapis yang biasa digunakan Dalam penggunaan sebenar, nilai parameter boleh dilaraskan mengikut keperluan. Anda boleh mencipta lebih banyak kesan khas dengan menggabungkan kesan penapis yang berbeza.
Kesimpulan:

Melalui atribut penapis CSS, kami boleh menambah pelbagai pemprosesan imej dan kesan khas pada halaman web, antaranya skala kelabu adalah salah satu kesan skala kelabu yang biasa digunakan. Artikel ini memperkenalkan secara ringkas sintaks asas dan sifat biasa atribut penapis, dan memberikan beberapa contoh kod kesan biasa. Dengan menggunakan atribut penapis secara fleksibel, anda boleh menambahkan lagi daya tarikan visual pada halaman dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Panduan sifat penapisan CSS: penapis dan skala kelabu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!