backdrop-filterCSS özellik filtre efektleri (uygulamak için kullanılır grayscale, contrast, blurbir elementin arka plan / fon için, vs). backdrop-filterAynı etkiye sahiptir filterfiltre efektleri öğenin içeriğine yerine arka plana sadece uygulanan ve dışında mülkiyet.
Klasik örnek:
Fon filtresi olmadan Filtrelenmiş Arka Planlar
Önceden backdrop-filter, filtrelenmiş bir arka plan eklemenin tek yolu ayrı bir "arka plan" öğesi eklemek, bunu ön plan öğelerinin arkasına konumlandırmak ve şu şekilde filtrelemekti:
.background ( filter: blur(4px); position: absolute; width: 100%; height: 100%; )backdrop-filterÖzelliği bu fazladan “arka plan” unsurunu ortadan kaldırmak ve doğrudan fon için filtreleri uygulamak için izin verir:
.foreground ( backdrop-filter: blur(10px); ) /* No .wrapper needed! */Yazma backdrop-filtersırasında, Filtre Efektleri Modülü 2 Editör Taslağının bir parçasıdır ve resmi olarak herhangi bir spesifikasyonun parçası değildir. Tarayıcı desteği şu anda sınırlıdır (aşağıdaki "Tarayıcı Desteği" bölümüne bakın).
Sözdizimi
.element ( backdrop-filter: ()* | none ) aşağıdakilerden herhangi biri olabilir:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- (SVG filtreleri uygulamak için)
Bir arka plana birden çok s uygulayabilirsiniz , örneğin:
.element ( backdrop-filter: grayscale(0.5) opacity(0.8) /*… and on and on… */; )Filtre işlevlerinin her biri için kabul edilebilir değerler için W3C Filtre Efektleri Modülü Çalışma Taslağı'na bakın.
Misal
Süzgeç işlevlerine ve bunları birlikte kullanmanın şık yollarına kapsamlı bir bakış için filter, CSS-Püf Noktaları hakkındaki almanak girişine bakın .
Aşağıdaki Kalem, Robin Rendle'ın keşif makalesindeki bir örnekten çatallanmıştır backdrop-filter.
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 76 | Hayır | Hayır | 17 | 9 * |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | Hayır | 81 | 9.0-9.2 * |
İlişkili
filter
Kaynaklar
- Robin Rendle'ın fon filtresi özelliği
- Arka plan filtresinde MDN girişi