Rumah >hujung hadapan web >tutorial css >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:
3. Contoh kod:
Berikut ialah contoh kod beberapa kesan penapis yang biasa digunakan:
Kesan skala kelabu (skala kelabu):
img { filter: grayscale(100%); }
Kesan kabur
element { filter: blur(5px); }
element { filter: brightness(80%); }
element { filter: contrast(120%); }
element { filter: invert(100%); }
element { filter: sepia(100%); }
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!