Properti backdrop-filter memungkinkan kami menerapkan efek filter ke konten di balik elemen menggunakan CSS.

Properti ini merupakan perluasan ke Modul Efek Filter Level 1 yang mendefinisikan properti filter. Ia menggunakan sintaksis yang sama dengan properti filter tetapi efeknya diterapkan pada latar belakang elemen. Efek seperti itu biasanya terlihat di antarmuka untuk perangkat yang menjalankan iOS7 dan di atasnya, serta OS X Yosemite dan di atasnya. Tanpa properti ini, efek ini hanya dapat dicapai dengan mengedit gambar latar belakang itu sendiri dan menerapkan teknik kliping dan penentuan posisi.

Agar properti memiliki efek yang terlihat, harus ada 2 elemen yang ditumpuk satu sama lain di sepanjang sumbu z, dari elemen bersarang atau dari posisi absolut. Juga, latar belakang elemen yang menerapkan filter latar belakang, harus semi transparan. filter latar belakang bekerja dengan membuat mesin browser menargetkan konten di belakang elemen gaya, dan bukan latar belakang elemen itu sendiri. Efek filter kemudian diterapkan pada konten itu, dan latar belakang dikomposisikan dengan elemen lain pada halaman dalam rendering akhir.

Menerapkan filter latar belakang ke elemen juga menciptakan konteks penumpukan baru, seperti saat opacity diterapkan.

Perhatikan bahwa penggunaan properti ini dapat memiliki efek buruk pada kinerja, terutama bila diterapkan pada sejumlah besar elemen atau area halaman yang besar, dan karenanya harus digunakan dengan pertimbangan yang cermat.

Official Syntax:

 

Values:

none: Ini adalah nilai awal. Tidak ada efek filter diterapkan ke latar belakang.

<filter-function-list>: Daftar fungsi filter yang dipisahkan oleh ruang, diterapkan sesuai urutannya. Berikut ini adalah daftar fungsi filter yang tersedia, yang sama dengan yang untuk properti filter.