Stil Filtre Özelliği

Tanım ve Kullanım

filter Görsellere (örneğin bulanıklaşma ve doygunluk) görsel etkiler ekleyin.

Ayrıca bakınız:

CSS İpuçlarıFiltre özelliği

Örnek

Görselin rengini siyah-beyaza değiştir (100% gri):

document.getElementById("myImg").style.filter = "grayscale(100%)";

Kişisel olarak deneyin

Sözdizimi

Filtre özelliğini döndür:

nesne.style.filter

Filtre özelliğini ayarla:

nesne.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"

Filtre Fonksiyonu

Yorum:Yüzde değerleri (örneğin 75%) ile filter kullanan filtre de ondalık değerleri (yani 0.75) kabul eder.

Filtre Açıklama
none Hiçbir etki belirtilmemiş.
blur(px)

Görseli bulanıklaştırma etkisi uygula. Daha büyük değerler daha fazla bulanıklık oluşturur.

Değer belirlenmemişse, 0 kullanılır.
brightness(%)

Görüntü parlığını ayarlayın.

0% görüntüyü tamamen siyah yapar.

100% (1) varsayılan değerdir, orijinal görüntüyü belirtir.

100% üzerindeki değerler daha parlak sonuçlar sağlar.
contrast(%)

Görüntü kontrastunu ayarlayın.

0% görüntüyü tamamen siyah yapar.

100% (1) varsayılan değerdir, orijinal görüntüyü belirtir.

100% üzerindeki değerler düşük kontrast sonuçlar sağlar.
drop-shadow(h-shadow v-shadow blur spread color)

Görüntüye gölge etkisi uygulayın.

Mümkün olan değerler:

h-shadow - Gerekli. Yatay gölgenin piksel değerini belirler. Negatif değerler gölgeleri görüntünün soluna yerleştirir.

v-shadow - Gerekli. Dikey gölgenin piksel değerini belirler. Negatif değerler gölgeleri görüntü üzerine yerleştirir.

blur - Opsiyonel. Üçüncü değer, piksel cinsinden belirlenmelidir. Gölgelere bulanıklık ekler. Daha büyük değerler daha fazla bulanıklık sağlar (gölge daha büyük ve daha parlak hale gelir). Negatif değer kullanılmaz. Belirlenmemişse, 0 (gölgenin kenarları net olacaktır).

spread - Opsiyonel. Dördüncü değer, piksel cinsinden belirlenmelidir. Pozitif değerler gölgeleri genişletir ve büyütür, negatif değerler gölgeleri küçültür ve daraltır. Belirlenmemişse, 0 (gölge, elemanın boyutlarıyla aynı olacaktır).

Yorum:Chrome, Safari ve Opera, olası diğer tarayıcılar, dördüncü uzunluktan desteklenmez; eklense bile görüntülenmez.

colorOpsiyonel. Gölgelere renk ekleyin. Belirlenmemişse, renk tarayıcıya bağlıdır (genellikle siyah).

İpucu:Bu filter, box-shadow özelliğine benzer.
grayscale(%)

Görüntüyü griye dönüştür.

0% (0) varsayılan değerdir, orijinal görüntüyü belirtir.

100% görüntüyü tamamen griye dönüştürür (siyah-beyaz görüntüler için kullanılır).

Yorum:Negatif değerlere izin verilmez.
hue-rotate(deg)

Görüntüye ton ayarı uygulayın. Bu değer, görüntü örneklerinin ton halkası etrafında ayarlanacak dereceleri tanımlar.

0deg varsayılan değerdir, orijinal görüntüyü belirtir.

Yorum:Maksimum değer 360 derecedir.
invert(%)

Görüntüdeki örnekleri tersine çevir.

0% (0) varsayılan değerdir, orijinal görüntüyü belirtir.

100% görüntüyü tamamen tersine çevirir.

Yorum:Negatif değerlere izin verilmez.
opacity(%)

Görüntünün şeffaflık seviyesini ayarlayın. Şeffaflık seviyesi, şeffaflık seviyesini tanımlar, şu şekilde:

0% tamamen şeffaftır.

100% (1) varsayılan değerdir, orijinal görüntüyü belirtir (şeffaflık olmamak üzere).

Yorum:Negatif değerlere izin verilmez.

İpucu:Bu filter, opacity özelliğine benzer.
saturate(%)

Görüntü doygunluğunu ayarlayın.

0% (0) görüntüyü tamamen doymaz hale getirir.

100% varsayılan değerdir, orijinal görüntüyü belirtir.

100%以上 değerleri aşırı doygun sonuçlar sağlar.

Yorum:Negatif değerlere izin verilmez.
sepia(%)

Görüntüyü koyu kahverengiye dönüştür.

0% (0) varsayılan değerdir, orijinal görüntüyü belirtir.

100% tamamen koyu kahverengi yapar.

Yorum:Negatif değerlere izin verilmez.

Teknik ayrıntılar

CSS sürümü: CSS3

Tarayıcı desteği

Tablo sayısız, bu özelliği destekleyen ilk tam destekleyen tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
53.0 13.0 35.0 9.1 40.0