Backdrop-filter - Trik CSS

Anonim

The backdrop-filterproperti di CSS digunakan untuk menerapkan efek filter ( grayscale, contrast, blur, dll) dengan latar belakang / latar belakang dari elemen. The backdrop-filtermemiliki efek yang sama seperti filterproperti, kecuali efek filter yang diterapkan hanya untuk latar belakang dan bukan ke konten elemen.

Contoh klasik:

Latar Belakang yang Difilter tanpa filter latar belakang

Sebelumnya backdrop-filter, satu-satunya cara untuk menambahkan latar belakang yang difilter adalah dengan menambahkan elemen "latar belakang" yang terpisah, posisikan di belakang elemen latar depan dan filter seperti ini:

 
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )

The backdrop-filterproperti memungkinkan Anda untuk menghilangkan ekstra “latar belakang” elemen ini dan menerapkan filter untuk latar belakang langsung:

.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */

Pada saat penulisan, backdrop-filteradalah bagian dari Draf Editor Efek Modul 2 dan bukan bagian resmi dari spesifikasi apa pun. Dukungan browser saat ini terbatas (lihat "Dukungan Browser" di bawah).

Sintaksis

.element ( backdrop-filter: ()* | none )

dapat berupa salah satu dari berikut ini:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - (untuk menerapkan filter SVG)

Anda dapat menerapkan beberapa s ke tampilan latar, seperti:

.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )

Lihat Konsep Kerja Modul Efek Filter W3C untuk nilai yang dapat diterima untuk setiap fungsi filter.

Contoh

Untuk tampilan menyeluruh tentang fungsi filter dan cara bagus untuk menggunakannya bersama, lihat filterentri almanak di CSS-Tricks.

Pena berikut ini bercabang dari contoh dalam penjelajahan artikel Robin Rendle backdrop-filter.

Dukungan Browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
76 Tidak Tidak 17 9 *

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 Tidak 81 9.0-9.2 *

Terkait

  • filter

Sumber daya

  • Properti filter latar belakang oleh Robin Rendle
  • Entri MDN pada filter latar belakang