Contoh
Mengubah warna gambar hitam dan putih (100% grayscale) :
// Standard syntax
document.getElementById("myImg").style.filter
= "grayscale(100%)";
// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Cobalah sendiri " Definisi dan Penggunaan
Filter properti menambahkan efek visual (like blur and saturation) gambar.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Nomor diikuti oleh Webkit menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| filter | 18,0 Webkit | 13.0 | 35,0 | 6.0 Webkit | 15,0 Webkit |
Catatan: Chrome, Safari dan Opera mendukung alternatif, properti WebkitFilter.
Sintaksis
Kembali properti filter:
object .style.filterMengatur properti filter:
object .style.filter="none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia()"
Filter Fungsi
Catatan: filter yang menggunakan nilai persentase (ie 75%) , juga menerima nilai sebagai desimal (ie 0.75) .
| Menyaring | Deskripsi |
|---|---|
| tak satupun | Menentukan ada efek |
| blur( px ) | Menerapkan efek blur pada gambar. Sebuah nilai yang lebih besar akan menciptakan lebih banyak blur. Jika tidak ada nilai yang ditentukan, 0 digunakan. |
| brightness( % ) | Menyesuaikan kecerahan gambar. 0% akan membuat gambar benar-benar hitam. 100% (1) adalah default dan merupakan gambar asli. Nilai lebih dari 100% akan memberikan hasil yang lebih cerah. |
| contrast( % ) | Menyesuaikan kontras gambar. 0% akan membuat gambar benar-benar hitam. 100% (1) adalah default dan merupakan gambar asli. Nilai lebih dari 100% akan memberikan hasil dengan kurang kontras. |
| drop shadow( h-shadow v-shadow blur spread color ) | Menerapkan drop shadow efek gambar. Kemungkinan nilai: h-shadow - Diperlukan. Menentukan nilai pixel untuk bayangan horizontal. nilai negatif menempatkan bayangan di sebelah kiri gambar. v-shadow - Diperlukan. Menentukan nilai pixel untuk bayangan vertikal. nilai negatif menempatkan bayangan di atas gambar. blur - Opsional. Ini adalah nilai yang ketiga, dan harus dalam piksel. Menambahkan efek blur untuk bayangan. Sebuah nilai yang lebih besar akan menciptakan lebih banyak blur (bayangan menjadi lebih besar dan lebih ringan). nilai-nilai negatif tidak diizinkan. Jika tidak ada nilai yang ditentukan, 0 digunakan (tepi bayangan adalah tajam). spread - Opsional. Ini adalah nilai yang keempat, dan harus dalam piksel. nilai-nilai positif akan menyebabkan bayangan untuk memperluas dan tumbuh lebih besar, dan nilai-nilai negatif akan menyebabkan bayangan menyusut. Jika tidak ditentukan, maka akan 0 (the shadow will be the same size as the element) . Catatan: Chrome, Safari dan Opera, dan mungkin browser lain, tidak mendukung panjang 4 ini; itu tidak akan membuat jika ditambahkan. Warna: Opsional. Menambahkan warna bayangan. Jika tidak ditentukan, warna tergantung pada browser (often black) . Tip: Filter ini mirip dengan kotak-shadow properti. |
| grayscale( % ) | Mengkonversi gambar ke grayscale. 0% (0) adalah default dan merupakan gambar asli. 100% akan membuat gambar benar-benar abu-abu (used for black and white images) . Catatan: nilai-nilai negatif tidak diizinkan. |
| hue- rotate( deg ) | Menerapkan rotasi rona pada gambar. Nilai mendefinisikan jumlah derajat sekitar lingkaran warna sampel gambar akan disesuaikan. 0deg adalah default, dan merupakan gambar asli. Catatan: Nilai maksimum adalah 360deg. |
| invert( % ) | Membalikkan sampel dalam gambar. 0% (0) adalah default dan merupakan gambar asli. 100% akan membuat gambar benar-benar terbalik. Catatan: nilai-nilai negatif tidak diizinkan. |
| opacity( % ) | Menentukan tingkat opacity untuk gambar. Opacity tingkat menggambarkan transparansi tingkat, di mana: 0% benar-benar transparan. 100% (1) adalah default dan merupakan gambar asli (no transparency) . Catatan: nilai-nilai negatif tidak diizinkan. Tip: filter ini mirip dengan opacity properti. |
| saturate( % ) | Jenuh gambar. 0% (0) akan membuat gambar benar-benar un-jenuh. 100% adalah default dan merupakan gambar asli. Nilai lebih dari 100% memberikan hasil yang super-jenuh. Catatan: nilai-nilai negatif tidak diizinkan. |
| sepia( % ) | Mengkonversi gambar ke sepia. 0% (0) adalah default dan merupakan gambar asli. 100% akan membuat gambar benar-benar sepia. Catatan: nilai-nilai negatif tidak diizinkan. |
Rincian teknis
| CSS Versi | CSS3 |
|---|
Pages terkait
Referensi CSS: filter property
<Style Object