v2.5.2
Giriş yap

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
tayfunerbilen
1224 gün önce eklendi - 4319 kez görüntülendi.
Github'da Düzenle
Önceki all Sonraki animation-delay