Properti filter Style

Definisi dan penggunaan

filter Atur efek visual (seperti blur dan kepadatan) untuk gambar.

Lihat pula:

Panduan CSS:Properti filter

Contoh

Ubah warna gambar menjadi hitam-putih (100% abu-abu):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Coba sendiri

Sintaks

Kembalikan properti filter:

object.style.filter

Atur properti filter:

object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Fungsi Filter

Keterangan：Filter yang digunakan dalam persen (seperti 75%) menerima nilai desimal (yaitu 0.75).

Filter Deskripsi
none Tentukan tanpa efek.
blur(px)

Terapkan efek blur pada gambar. Nilai yang besar akan menghasilkan blur yang lebih banyak.

Jika nilai tidak ditentukan, maka digunakan 0.
brightness(%)

Tunjukkan kecerahan gambar.

0% akan membuat gambar sepenuhnya hitam.

100% (1) adalah nilai default, yang menunjukkan gambar asli.

Nilai di atas 100% akan memberikan hasil yang lebih terang.
contrast(%)

Tunjukkan kontras gambar.

0% akan membuat gambar sepenuhnya hitam.

100% (1) adalah nilai default, yang menunjukkan gambar asli.

Nilai di atas 100% akan memberikan hasil yang kontras rendah.
drop-shadow(h-shadow v-shadow blur spread color)

Terapkan efek proyeksi ke gambar.

Nilai yang mungkin:

h-shadow - wajib. Tentukan nilai piksel bayangan horizontal. Nilai negatif akan menempatkan bayangan di sebelah kiri gambar.

v-shadow - wajib. Tentukan nilai piksel bayangan vertikal. Nilai negatif akan menempatkan bayangan di atas gambar.

blur - opsional. Ketiga nilai, harus dalam satuan piksel. Tambahkan efek blur ke bayangan. Nilai yang lebih besar akan memproduksi blur yang lebih banyak (bayangan menjadi lebih besar dan lebih terang). Tidak diizinkan nilai negatif. Jika nilai tidak ditentukan, maka digunakan 0 (bayangan akan memiliki edge yang tajam).

spread - opsional. Keempat nilai, harus dalam satuan piksel. Nilai positif akan membesarkan dan memperbesar bayangan, sementara nilai negatif akan memperkecil bayangan. Jika tidak ditentukan, itu akan berada di 0 (bayangan akan sama besar dengan ukuran elemen).

Keterangan：Chrome, Safari, dan Opera, serta mungkin beberapa peramban lainnya, tidak mendukung panjang keempat; jika ditambahkan, itu tidak akan ditampilkan.

color：opsional. Tambahkan warna ke bayangan. Jika tidak ditentukan, warna tergantung pada peramban (biasanya hitam).

Petunjuk：Filter ini mirip dengan atribut box-shadow.
grayscale(%)

Konversi gambar ke warna abu-abu.

0% (0) adalah nilai default, yang menunjukkan gambar asli.

100% akan membuat gambar sepenuhnya berwarna abu-abu (digunakan untuk gambar hitam-putih).

Keterangan：Tidak diizinkan nilai negatif.
hue-rotate(deg)

Terapkan putar warna di atas gambar. Nilai ini menentukan derajat putar warna yang akan disesuaikan di sekitar lingkaran warna.

0deg adalah nilai default, yang menunjukkan gambar asli.

Keterangan：Nilai maksimal adalah 360 derajat.
invert(%)

Balikkan sample gambar di dalam gambar.

0% (0) adalah nilai default, yang menunjukkan gambar asli.

100% akan membuat gambar sepenuhnya diacak.

Keterangan：Tidak diizinkan nilai negatif.
opacity(%)

Setel tingkat kecerahan gambar. Tingkat kecerahan menggambarkan tingkat kecerahan, di mana：

0% adalah transparan sepenuhnya.

100% (1) adalah nilai default, yang menunjukkan gambar asli (tanpa kejelasan).

Keterangan：Tidak diizinkan nilai negatif.

Petunjuk：Filter ini mirip dengan atribut opacity.
saturate(%)

Tunjukkan kepadatan gambar.

0% (0) akan membuat gambar sepenuhnya tak disaturasi.

100% adalah nilai default, yang menunjukkan gambar asli.

Nilai di atas 100% akan memberikan hasil yang terlalu disaturasi.

Keterangan：Tidak diizinkan nilai negatif.
sepia(%)

Konversi gambar ke warna coklat kehitam.

0% (0) adalah nilai default, yang menunjukkan gambar asli.

100% akan membuat gambar sepenuhnya berwarna coklat kehitam.

Keterangan：Tidak diizinkan nilai negatif.

Detil Teknologi

Versi CSS: CSS3

Dukungan Browser

Angka di tabel menunjukkan versi browser yang mendukung properti ini penuh.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0