CSS backdrop-filter Özelliği
CSS3
Adından da anlaşılacağı üzere, arkaplan görseline/fonuna filtre uygulamak için kullanılır. Filtreler sadece arakafon'a uygulanıyor, içerik alanı bu işlemlerden etkilenmez.
Yapısı (Syntax)backdrop-filter: blur() | brightness() | constrast() | grayscale() | hue-rotate() | opacity() | saturate() | sepia()
NOT
Şu an için sınırlı sayıda tarayıcı bu özelliği desteklemektedir. Ancak ileriye dönük kullanılması mutlak özellikler arasında yer almaktadır.
| Varsayılan Değer | none |
| JavaScript Yapısı |
object.style.backdropFilter = "blur(5px)"
|
| Animasyon Özellikleri Uygulanabilir | Evet (Daha fazla detay) |
Değerler
| Değer | Açıklama | Versiyon |
|---|---|---|
| blur(değer) | Bulanıklığını ayarlar. | CSS3 |
| brightness(değer) | Parlaklığını ayarlar. | CSS3 |
| contrast(değer) | Kontrastını ayarlar. | CSS3 |
| grayscale(değer) | Siyah-beyazlık tonunu ayarlar. | CSS3 |
| hue-rotate(değer) | Renklerin birbiriyle karışımını ayarlar. | CSS3 |
| invert(değer) | Renk derğerlerini tersine çevirir. | CSS3 |
| opacity(değer) | Parlaklığı ayarlanır. | CSS3 |
| saturate(değer) | Doygunluğunu ayarlar. | CSS3 |
| sepia(değer) | Renk sıcaklığını ayarlar. | CSS3 |
Örnekler
Örneğin resmin belli bir bölümüne filtre uygulayalım.
<div class="wrapper">
<div class="filter-box">
</div>
</div>
<style>
.wrapper {
width: 400px;
height: 200px;
background: url(https://sample-videos.com/img/Sample-jpg-image-200kb.jpg) no-repeat center;
background-size: cover;
}
.wrapper .filter-box {
width: 100px;
height: 100px;
backdrop-filter: blur(2px) sepia(.4) invert(.3) hue-rotate(15deg) contrast(.7);
float: right;
}
</style>Tarayıcı Desteği
| Chrome | Firefox | Edge | Internet Explorer | Opera | Safari | |
|---|---|---|---|---|---|---|
backdrop-filter
|
76 | 70 | 17 | 34 | 9 |
Destekliyor
Desteklemiyor
