Sepia fonksiyonu

sepia fonksiyonu, bir arka plan görüntüsünü sepya'ya - kahverengi tonlu siyah-beyaz bir görüntüye - dönüştürmenizi sağlar. 0 değeri, görüntünün orijinal halinde kalacağını belirtir. 100% veya 1 değeri, arka planı tamamen sepya'ya dönüştürür. Bu aralıkta yer alan herhangi bir sayı, sepya uygulamasını doğrusal olarak belirler. Negatif bir değer belirlenemez. Varsayılan değer 0'dır.

Sözdizimi

seçici {
	filter: sepia(sayı);
}

Örnek

Resmimizi tamamen sepya yapalım:

<div id="elem"></div>

#elem {
	filter: sepia(100%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi sepya uygulamasını 50% olarak azaltalım:

<div id="elem"></div>

#elem {
	filter: sepia(50%);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Örnek

Şimdi sepia fonksiyonuna 0'a eşit bir değer verelim:

<div id="elem"></div>

#elem {
	filter: sepia(0);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Ayrıca bakınız

arka planı bulanıklaştıran blur fonksiyonu
arka plana parlaklık veren brightness fonksiyonu
arka plana kontrastlık veren contrast fonksiyonu
arka plana gölge veren drop-shadow fonksiyonu
arka plana renk tonu döndürme uygulayan hue-rotate fonksiyonu
arka plan renklerini tersine çeviren invert fonksiyonu
arka plana saydamlık veren opacity fonksiyonu
arka plan için kısaltılmış özellik olan background özelliği
bir bloğa arka plan resmi vermek için kullanılan background-image özelliği
arka plana stil veren filter özelliği