CSS3 filter (penyaring) sifat
contoh
Mengedit semua warna untuk gambar hitam dan putih (100% abu-abu):
-webkit-filter: grayscale (100% ); / * Chrome, Safari, Opera * /
filter: grayscale (100%);
}
Coba »
Definisi dan penggunaan
atribut penyaring mendefinisikan elemen (biasanya <img>) efek visual (misalnya: Fuzzy dan saturasi).
| default: | tak satupun |
|---|---|
| warisan: | tidak |
| dukungan animasi: | Ya. Rincian dapat ditemukan di CSS Animation |
| versi: | CSS3 |
| sintaks JavaScript: | keberatan .style.WebkitFilter = "grayscale (100%)" untuk mencoba >> |
Dukungan Browser
Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.
Segera setelah nomor untuk awalan browser ditentukan -webkit-.
| milik | |||||
|---|---|---|---|---|---|
| filter | 18,0 -webkit- | Tidak mendukung | 35,0 | 6.0 -webkit- | 15,0 -webkit- |
Catatan: Explorer Browser Lama Internet (4,0-8,0) untuk mendukung non-standar "filter" properti telah ditinggalkan. IE8 dan browser sebelumnya sering menggunakan opacity properti.
CSS Syntax
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Tip: Gunakan spasi untuk memisahkan beberapa filter.
fungsi filter
Catatan: Filter biasanya menggunakan persentase (misalnya: 75%), tentu saja, juga dapat digunakan untuk mewakili desimal (misalnya: 0,75).
| filter | deskripsi |
|---|---|
| tak satupun | Nilai default, tidak berpengaruh. |
| blur (px) | Gaussian blur untuk pengaturan gambar. "Radius" untuk menetapkan nilai fungsi Gaussian standar miskin, atau jumlah piksel pada layar mencair bersama-sama, sehingga semakin besar nilai lebih kabur; Jika nilai tidak diatur, default adalah 0; parameter ini dapat mengatur nilai panjang css, tetapi tidak menerima nilai-nilai persentase. |
| kecerahan (%) | Aplikasi dari perkalian linear gambar untuk membuatnya tampak lebih cerah atau lebih gelap. Jika nilai adalah 0%, gambar semua hitam. Nilai adalah 100%, tidak ada perubahan dalam gambar. nilai-nilai lain sesuai dengan linier multiplier effect. Nilai lebih dari 100% yang mungkin, gambar akan lebih cerah daripada yang asli. Jika nilai tidak diatur, default adalah 1. |
| Sebaliknya (%) | Menyesuaikan kontras gambar. Nilai adalah 0%, gambar semua hitam. Nilai adalah 100%, gambar tidak berubah. Nilai dapat melebihi 100%, yang berarti akan menggunakan kontras yang lebih rendah. Jika nilai tidak diatur, default adalah 1. |
| drop shadow (h-shadow v -shadow blur penyebaran warna) | Mengatur efek bayangan pada gambar. Bayangan disintesis pada gambar di bawah, mungkin ada ambiguitas, warna tertentu dapat menggambar diagram topeng versi offset. Fungsi menerima <shadow> nilai (didefinisikan dalam latar belakang CSS3) jenis, selain "inset" kata kunci tidak diperbolehkan. Fungsi dengan kotak-shadow properti kotak-bayangan yang ada sangat mirip, kecuali bahwa, melalui filter, beberapa browser untuk kinerja yang lebih baik memberikan akselerasi hardware.
|
| grayscale (%) | Mengkonversi gambar ke grayscale. Ini mendefinisikan nilai rasio konversi. Nilai dari 100% benar-benar dikonversi ke gambar grayscale, nilai 0% dari gambar tidak berubah. Nilai antara 0% dan 100%, efek multiplier adalah linear. Jika tidak diatur, nilai default adalah 0; |
| hue-rotate (deg) | Aplikasi untuk rotasi gambar rona. image "Angle" sudut cincin warna adalah nilai disesuaikan nilai yang ditetapkan. Nilai 0deg, perubahan gambar. Jika nilai tidak diatur, nilai default adalah 0deg. Meskipun tidak ada nilai maksimum yang melebihi nilai setara dengan 360deg perimeter lain. |
| membalikkan (%) | Pembalik input gambar. Ini mendefinisikan nilai rasio konversi. 100% dari nilai benar-benar terbalik. Nilai 0%, gambar tidak berubah. Sebuah nilai antara 0% dan 100%, efek multiplier adalah linear. Jika nilai tidak diatur, nilai default adalah 0. |
| opacity (%) | tingkat konversi transparansi gambar. Ini mendefinisikan nilai rasio konversi. 0% benar-benar transparan, dan nilai 100%, gambar tidak berubah. Sebuah nilai antara 0% dan 100%, efeknya linear multiplier, dikalikan dengan jumlah sampel juga setara dengan gambar. Jika nilai tidak diatur, nilai default adalah 1. Fungsi ini sangat mirip dengan properti opacity yang ada, kecuali bahwa melalui filter, dalam rangka meningkatkan kinerja beberapa browser akan memberikan akselerasi hardware. |
| jenuh (%) | Mengubah saturasi gambar. Ini mendefinisikan nilai rasio konversi. 0% sepenuhnya tak jenuh, tidak ada perubahan dalam gambar adalah 100%. nilai lain, efek multiplier adalah linear. Lebih dari 100% dari nilai diperbolehkan, ada kejenuhan yang lebih tinggi. Jika nilai tidak diatur, nilai default adalah 1. |
| sepia (%) | Mengkonversi gambar ke sepia. Ini mendefinisikan nilai rasio konversi. Nilai 100% sepenuhnya coklat gelap, adalah 0% dari gambar tidak berubah. Nilai antara 0% dan 100%, efek multiplier adalah linear. Jika tidak diatur, nilai default adalah 0; |
| url () | Fungsi URL mengambil file XML, yang menetapkan SVG filter, dan mungkin termasuk jangkar untuk menentukan elemen filter tertentu. Sebagai contoh: filter: url(svg-url#element-id) |
| awal | Properti diatur ke nilai default, lihat: CSS Kata Kunci Awal |
| mewarisi | Properti ini adalah warisan dari elemen induk, Anda dapat melihat: CSS kata kunci mewarisi |
contoh yang lebih
contoh Fuzzy
Foto blur Gaussian:
-webkit-filter: blur (5px) ; / * Chrome, Safari, Opera * /
filter: blur (5px);
}
Coba »
Kecerahan Fungsi Instance
Membuat terang gambar:
-webkit-filter: kecerahan (200% ); / * Chrome, Safari, Opera * /
filter: kecerahan (200%);
}
Coba »
Kontras Fungsi Instance
Mengatur kontras gambar:
-webkit-filter: kontras (200% ); / * Chrome, Safari, Opera * /
filter: kontras (200%);
}
Coba »
Contoh-contoh fungsi drop-shadow
Mengatur efek bayangan pada gambar:
-webkit-filter: drop-shadow ( 8px 8px 10px red); / * Chrome, Safari, Opera * /
filter: drop-shadow (8px 8px 10px red);
}
Coba »
Grayscale Fungsi Instance
Mengkonversi gambar ke grayscale:
-webkit-filter: grayscale (50% ); / * Chrome, Safari, Opera * /
filter: grayscale (50%);
}
Coba »
() Fungsi contoh hue-rotate
Aplikasi rotasi rona pada gambar:
-webkit-filter: hue-rotate ( 90deg); / * Chrome, Safari, Opera * /
filter: hue-rotate (90deg) ;
}
Coba »
Invert Fungsi Instance
Pembalik input gambar:
-webkit-filter: invert (100% ); / * Chrome, Safari, Opera * /
filter: invert (100%);
}
Coba »
Opacity Fungsi Instance
tingkat konversi transparansi gambar:
-webkit-filter: opacity (30% ); / * Chrome, Safari, Opera * /
filter: opacity (30%);
}
Coba »
Jenuh Fungsi Instance
Mengkonversi Saturation gambar:
-webkit-filter: jenuh (800% ); / * Chrome, Safari, Opera * /
filter: jenuh (800%);
}
Coba »
Sepia Fungsi Instance
Mengkonversi gambar ke sepia:
-webkit-filter: sepia (100% ); / * Chrome, Safari, Opera * /
filter: sepia (100%);
}
Coba »
fungsi komposit
Penggunaan beberapa filter, filter masing-masing dipisahkan oleh spasi.
Catatan: Perintah ini sangat penting (misalnya, menggunakan grayscale () sebelum menggunakan sepia () akan menghasilkan lengkap gambar skala abu-abu).
-webkit-filter: kontras (200% ) kecerahan (150%); / * Chrome, Safari, Opera * /
filter: kontras (200%) kecerahan (150%);
}
Coba »
Semua contoh penyaring
Contoh berikut menunjukkan bagaimana menggunakan semua filter:
-webkit-filter: blur (4px) ;
filter: blur (4px);
}
.brightness {
-webkit-filter: kecerahan (0.30) ;
filter: kecerahan (0.30);
}
.contrast {
-webkit-filter: kontras (180% );
filter: kontras (180%);
}
.grayscale {
-webkit-filter: grayscale (100% );
filter: grayscale (100%);
}
.huerotate {
-webkit-filter: hue-rotate ( 180deg);
filter: hue-rotate (180deg) ;
}
.invert {
-webkit-filter: invert (100% );
filter: invert (100%);
}
.opacity {
-webkit-filter: opacity (50% );
filter: opacity (50%);
}
.saturate {
-webkit-filter: jenuh (7) ;
filter: jenuh (7);
}
.sepia {
-webkit-filter: sepia (100% );
filter: sepia (100%);
}
.shadow {
-webkit-filter: drop-shadow ( 8px 8px 10px hijau);
filter: drop-shadow (8px 8px 10px hijau);
}
Coba »
Artikel terkait
HTML DOM Referensi: Gaya atribut filter