CSS backdrop-filter Özelliği

Tanım ve kullanım

backdrop-filter Bu özellik, element arkasındaki alanlara grafik etkileri uygulamak için kullanılır.

İpucu:Etkiyi görmek için, elementin veya arka planının en az bir kısmı şeffaf olmalıdır.

Örnek

Element arkasındaki alanlara grafik etkileri ekler:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

Kişisel olarak deneyin

CSS dilbilgisi

backdrop-filter: none|filter|initial|inherit;

Özellik değeri

Değer Açıklama
none Varsayılan değer. Arka plana herhangi bir süzgeç uygulamaz.
filter

Boşluklarla ayrılmış süzgeç fonksiyonları listesi, örneğin:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • sepia()
  • saturate()

veya SVG süzgeç URL'sine yönlendirir.

initial Bu özelliği varsayılan değerine ayarlar. Bakınız initial.
inherit Bu özelliği, ebeveyn elementinden miras alır. Bakınız inherit.

Teknik ayrıntılar

Varsayılan değer: none
Miras: Hayır
Animasyon yapımı: Desteği var. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.backdropFilter="grayscale(100%)"

Tarayıcı desteği

Tablodaki sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü gösterir.

Bu öne eklenen sayılar, bu öne ilk destekleyen sürümü gösterir.

Chrome Edge Firefox Safari Opera
76 79 103 9 -webkit- 63

İlgili sayfalar

Eğitim:CSS 图像

Kaynak:CSS filtre özelliği

Kaynak:HTML DOM filtre özelliği