Penapis CSS adalah alat kuat yang boleh digunakan pengarang untuk mencapai pelbagai kesan visual (seperti penapis Photoshop untuk penyemak imbas). Properti CSS filtermemberikan akses kepada kesan seperti kabur atau pergeseran warna pada rendering elemen sebelum elemen tersebut dipaparkan. Filter biasanya digunakan untuk menyesuaikan rendering gambar, latar belakang, atau batas.
Sintaksnya adalah:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Terdapat sebilangan fungsi untuk digunakan untuk nilai:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- untuk menggunakan penapis SVGcustom()- "akan datang"
Pelbagai fungsi boleh digunakan, ruang dipisahkan.
.do-more-things ( filter: blur(20px) grayscale(20%); )Fungsi Penapis
Untuk menggunakan sifat penapis CSS, anda menentukan nilai untuk salah satu fungsi berikut yang disenaraikan di atas. Sekiranya nilainya tidak sah, fungsi mengembalikan "tidak ada". Kecuali disebutkan, fungsi yang mengambil nilai dinyatakan dengan tanda persen (seperti pada 34%) juga menerima nilai yang dinyatakan sebagai perpuluhan (seperti pada 0,34).
Inilah demo yang membolehkan anda bermain dengan penapis individu sedikit:
skala kelabu ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Menukar gambar input ke skala kelabu. Nilai "jumlah" menentukan bahagian penukaran. Nilai 100% adalah skala kelabu sepenuhnya. Nilai 0% meninggalkan input tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear pada kesan. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan. Nilai negatif tidak dibenarkan.
sepia ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Menukar gambar input ke sepia. Nilai "jumlah" menentukan bahagian penukaran. Nilai 100% adalah sepia sepenuhnya. Nilai 0 meninggalkan input tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear pada kesan. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan. Nilai negatif tidak dibenarkan.
tepu ()
filter: saturate(2); /* same as… */ filter: sature(200%);Menepati gambar input. Nilai "jumlah" menentukan bahagian penukaran. Nilai 0% tidak tepu sepenuhnya. Nilai 100% meninggalkan input tidak berubah. Nilai lain ialah pengganda linear pada kesan. Nilai melebihi 100% dibenarkan, memberikan hasil yang sangat tepu. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan. Nilai negatif tidak dibenarkan.
putar rona ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Menerapkan putaran rona pada gambar input. Nilai "sudut" menentukan bilangan darjah di sekitar lingkaran warna yang akan diselaraskan sampel input Nilai 0deg meninggalkan input tidak berubah. Sekiranya parameter "sudut" hilang, nilai 0degakan digunakan. Nilai maksimum ialah 360deg.
terbalik ()
filter: invert(100%);Membalikkan sampel dalam gambar input. Nilai "jumlah" menentukan bahagian penukaran. Nilai 100% terbalik sepenuhnya. Nilai 0% meninggalkan input tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear pada kesan. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan. Nilai negatif tidak dibenarkan.
kelegapan ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Menerapkan ketelusan pada sampel dalam gambar input. Nilai "jumlah" menentukan bahagian penukaran. Nilai 0% betul-betul telus. Nilai 100% meninggalkan input tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear pada kesan. Ini sama dengan mengalikan sampel gambar input dengan jumlah. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan. Fungsi ini serupa dengan sifat kelegapan yang lebih mantap; perbezaannya ialah dengan penapis, sebilangan penyemak imbas memberikan pecutan perkakasan untuk prestasi yang lebih baik. Nilai negatif tidak dibenarkan.
kecerahan()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Menerapkan pengganda linear untuk memasukkan gambar, menjadikannya kelihatan lebih kurang terang. Nilai 0% akan membuat gambar yang berwarna hitam sepenuhnya. Nilai 100% meninggalkan input tidak berubah. Nilai lain ialah pengganda linear pada kesan. Nilai dengan jumlah melebihi 100% dibenarkan, memberikan hasil yang lebih cerah. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan.
kontras ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Melaraskan kontras input. Nilai 0% akan membuat gambar yang berwarna hitam sepenuhnya. Nilai 100% meninggalkan input tidak berubah. Nilai melebihi jumlah melebihi 100% dibenarkan, memberikan hasil dengan sedikit kontras. Sekiranya parameter "jumlah" hilang, nilai 100% digunakan.
kabur ()
filter: blur(5px); filter: blur(1rem);Menerapkan kekaburan Gaussian pada gambar input. Nilai 'radius' mendefinisikan nilai sisihan piawai untuk fungsi Gaussian, atau berapa piksel pada layar yang bergabung antara satu sama lain, sehingga nilai yang lebih besar akan membuat lebih banyak kabur. Sekiranya tidak ada parameter yang diberikan, maka nilai 0 digunakan. Parameter ditentukan sebagai panjang CSS, tetapi tidak menerima nilai peratusan.
bayangan jatuh ()
filter: drop-shadow((2,3) ?)Menerapkan kesan drop shadow pada gambar input Bayangan drop secara berkesan adalah versi offset topeng alfa gambar input yang kabur dan digambar dalam warna tertentu, yang disusun di bawah gambar. Fungsi menerima parameter jenis (ditentukan dalam Latar Belakang CSS3), dengan pengecualian bahawa kata kunci 'sisipan' tidak dibenarkan.
Fungsi ini serupa dengan harta bayangan kotak yang lebih mapan; perbezaannya ialah dengan penapis, sebilangan penyemak imbas memberikan pecutan perkakasan untuk prestasi yang lebih baik.
Drop-shadow juga meniru objek yang dimaksudkan secara garis besar tidak seperti box-shadowyang hanya menganggap kotak sebagai jalannya.
Sama seperti teks-bayangan, tidak ada parameter 'spread' untuk membuat bayangan padat yang lebih besar daripada objek.
url ()
filter: url()Yang url()fungsi mengambil lokasi fail XML yang menentukan penapis SVG, dan mungkin termasuk sauh kepada elemen penapis tertentu. Berikut adalah tutorial yang berfungsi sebagai pengenalan penapis SVG yang bagus dengan demo yang menyeronokkan.
Penapis Animasi
Oleh kerana Penapis animasi, ia dapat membuka pintu untuk keseronokan.
Catatan
Anda boleh menggabungkan sebilangan fungsi untuk memanipulasi rendering, tetapi pesanan tetap penting (iaitu, grayscale()selepas menggunakan sepia()akan menghasilkan output kelabu sepenuhnya).
Nilai yang dikira selain daripada "tidak ada" menghasilkan penciptaan konteks susun dengan cara yang sama seperti opacity CSS. Sifat penapis tidak berpengaruh pada geometri model kotak elemen sasaran, walaupun penapis boleh menyebabkan lukisan di luar kotak sempadan elemen. Sebarang bahagian elemen sasaran dipengaruhi oleh fungsi penapis. Ini termasuk kandungan, latar belakang, sempadan, hiasan teks, garis besar dan mekanisme tatal terlihat elemen yang digunakan penapis, dan keturunannya. Penapis juga dapat diterapkan pada konten sebaris, seperti rentang teks individu.
Spesifikasi juga memperkenalkan filter(image-URL, filter-functions)fungsi pembungkus untuk gambar. Ini membolehkan anda menyaring sebarang gambar pada masa anda menggunakannya dalam CSS. Contohnya, anda boleh mengaburkan gambar latar tanpa mengaburkan teks. Fungsi penapis ini belum disokong di penyemak imbas. Sementara itu, anda dapat menerapkan latar belakang dan penapis ke elemen pseudo untuk membuat kesan yang serupa.
Bahan penapis proprietari IE
Juga menggunakan filterharta tanah, seperti:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )Sebilangan besar digunakan untuk kelegapan apabila anda perlu menyokong IE 8 dan ke bawah.
Maklumat lanjut
- Spesifikasi Kesan Penapis W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Galeri Penapis Bennett Feely
- Dokumen MDN
- Boleh saya guna
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Memahami Kesan Penapis CSS
Sokongan Penyemak Imbas
Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.
Desktop
| Chrome | Firefox | IE | Hujung | Safari |
|---|---|---|---|---|
| 18 * | 35 | Tidak | 79 | 6 * |
Mudah Alih / Tablet
| Android Chrome | Android Firefox | Android | Safari iOS |
|---|---|---|---|
| 88 | 85 | 4.4 * | 6.0-6.1 * |