CSS filtre özelliği

Tanım ve kullanım

filter özelliği, genellikle <img> elementinin etkileşimsel görselliğini (örneğin, bulanıklaşma ve doygunluk) tanımlar.

Ayrıca bakınız:

CSS eğitim:CSS resimleri

HTML DOM referans el kitabı:filter özelliği

Örnek

Tüm resimleri siyah-beyaz (100% gri) yapın:

img {
  filter: grayscale(100%);
}

Kendi kendine deneyin

İpucu:Daha fazla TIY örneği bulmak için sayfa altına gidin.

CSS grameri

filtre: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

İpucu:Birden fazla filtre kullanmak için her bir filtre arasında boşluk bırakın (sayfanın altındaki daha fazla örnek bkz.).

Teknik ayrıntılar

Varsayılan değer: none
Miras: Hayır
Animasyon yapımı: Desteklenir. Bakınız:Animasyonla ilgili özellikler.
Sürüm: CSS3
JavaScript dilbilgisi: object.style.filter="grayscale(100%)"

Filtre fonksiyonu

Yorum:Yüzde değerleri (örneğin 75％) ile filtre kullanılır, bu değer ondalık (örneğin 0.75) olarak da kabul edilir.

Filtre Açıklama
none Varsayılan değer. Etki belirlemek için kullanılır.
blur(px)

Resme bulanıklık etkisi uygular. Daha büyük değerler daha fazla bulanıklık yaratır.

Belirtilen değer varsa, 0 kullanılır.
brightness(%)

Resmin parlaklığını ayarlar.

  • 0％ resmi tamamen siyah yapar.
  • Varsayılan değer 100％'dür, orijinal resmi temsil eder.
  • Değerler 100％'den fazla ise daha parlak sonuçlar sağlar.
contrast(%)

Resmin kontrastunu ayarlar.

  • 0％ resmi tamamen siyah yapar.
  • Varsayılan değer 100％'dür, orijinal resmi temsil eder.
  • 100％'den fazla değerler daha yüksek kontrast sonuçları sağlar.
drop-shadow(h-shadow v-shadow blur spread color)

Resme gölge etkisi uygular.

Mümkün olan değerler:

  • h-shadow - Zorunlu. Yatay gölgenin pixel değerini belirtir. Negatif değerler gölgeleri resmin solunda yerleştirir.
  • v-shadow - Zorunlu. Dikey gölgenin pixel değerini belirtir. Negatif değerler gölgeleri resmin üzerinde yerleştirir.

blur - Seçmeli. Bu üçüncü değer, birim olarak pixel kullanmalıdır. Gölgeye bulanıklık etkisi ekler. Değer ne kadar büyükse, o kadar fazla bulanıklık yaratır (gölge daha büyük ve daha parlak hale gelir). Negatif değerler izin verilmez. Değer belirtilmemişse, 0 (gölgenin kenarları çok keskin) kullanılır.

spread - Seçmeli. Bu dördüncü değer, birim olarak pixel kullanmalıdır. Pozitif değerler gölgeleri genişletir ve büyütür, negatif değerler gölgeleri küçültür. Değer belirtilmemişse, 0 (gölge, öğenin boyutlarıyla aynı) kullanılır.

Yorum:Chrome, Safari ve Opera, belki de diğer tarayıcılar, dördüncü uzunluğu desteklememektedir; eklense bile gösterilmez.

color - Seçmeli. Gölgelere renk ekler. Belirtilmemişse, renk tarayıcıya bağlıdır (genellikle siyahdır).

Bu örnek, 8px genişlik ve yükseklik yönlü, 10px bulanıklık etkisi ile kırmızı gölgeler oluşturur:

filter: drop-shadow(8px 8px 10px red);

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

Görseli gri tonlamaya dönüştürün.

  • 0% (0), varsayılan değerdir ve orijinal görseli temsil eder.
  • 100% görseli tamamen griye dönüştürür (siyah-beyaz görseller için kullanılır).

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

Görsel üzerinde renk tonu dönüşümü uygulayın. Bu değer, renk halkasının derecesini tanımlar. Varsayılan değeri 0deg'dir ve orijinal görseli temsil eder.

Yorum:Maksimum değer 360deg'dir.
invert(%);

Görseldeki örnekleri tersine çevirin.

  • 0% (0), varsayılan değerdir ve orijinal görseli temsil eder.
  • 100% görseli tamamen tersine çevirir.

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

Görselin şeffaflık seviyesini ayarlayın. opacity-level, şeffaflık seviyesini tanımlar, şu şekilde:

  • 0% tamamen şeffaftır.
  • 100% (1), varsayılan değerdir ve orijinal görseli (şeffaflık) temsil eder.

Yorum:Negatif değerler izin verilmez.

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

Görselin doygunluğunu ayarlayın.

  • 0% (0), görseli tamamen doygun olmayan hale getirir.
  • 100%, varsayılan değerdir ve orijinal görseli temsil eder.
  • 100% üzerindeki değerler süper doygun sonuçlar sağlar.

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

Görseli koyu kahverengiye dönüştürün.

  • 0% (0), varsayılan değerdir ve orijinal görseli temsil eder.
  • 100% görseli tamamen koyu kahverengiye dönüştürür.

Yorum:Negatif değerler izin verilmez.
url();

url() fonksiyonu, SVG filtresinin XML dosyasının konumunu alır ve belirli bir filtre elementine işaret edebilir. Örnek:

filter: url(svg-url#element-id);
initial Bu özelliği varsayılan değerine ayarlayın. Gözatın: initial.
inherit Bu özelliği ebeveyn elementinden devralın. Gözatın: inherit.

Daha fazla örnek

Bulanık örnek

Görseli bulanık hale getirin:

img {
  filter: blur(5px);
}

Kendi kendine deneyin

Bulanık örnek 2

Bakışta bulanık arka plan görseli uygulayın:

img.background {
  filter: blur(35px);
}

Kendi kendine deneyin

Parlaklık örneği

Görselin parlaklığını ayarlayın:

img {
  filter: brightness(200%);
}

Kendi kendine deneyin

Kontrast örneği

Görselin kontrastunu ayarlayın:

img {
  filter: contrast(200%);
}

Kendi kendine deneyin

Gölge örneği

Görseli gölge etkisi uygulayın:

img {
  filter: drop-shadow(8px 8px 10px gray);
}

Kendi kendine deneyin

Gri tonlama örnekleri

Görüntüyü gri tonlamaya dönüştürün:

img {
  filter: grayscale(50%);
}

Kendi kendine deneyin

Renk tonu dönüşümü örnekleri

Görüntüye renk tonu dönüşümü uygulayın:

img {
  filter: hue-rotate(90deg);
}

Kendi kendine deneyin

Tersine çevirme örnekleri

Görüntüdeki örnekleri tersine çevirin:

img {
  filter: invert(100%);
}

Kendi kendine deneyin

Şeffaflık örnekleri

Görüntü şeffaflık seviyesini ayarlayın:

img {
  filter: opacity(30%);
}

Kendi kendine deneyin

Yoğunluk örnekleri

Görüntü yoğunluğunu ayarlayın:

img {
  filter: saturate(800%);
}

Kendi kendine deneyin

Koyu kahverengi örnekleri

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

img {
  filter: sepia(100%);
}

Kendi kendine deneyin

Çoklu filtre kullanma

Birden fazla filtre kullanmak için her bir filtreyi boşlukla ayırın. Dikkatlice, sıra önemlidir (örneğin, sepia() ardından grayscale() kullanmak tamamen gri bir görüntü oluşturur):

img {
  filter: contrast(200%) brightness(150%);
}

Kendi kendine deneyin

Tüm filtreler

Tüm filtre işlevlerini göster:

.blur {
  filter: blur(4px);
}
.brightness {
  filter: brightness(0.30);
}
.contrast {
  filter: contrast(180%);
}
.grayscale {
  filter: grayscale(100%);
}
.huerotate {
  filter: hue-rotate(180deg);
}
.invert {
  filter: invert(100%);
}
.opacity {
  filter: opacity(50%);
}
.saturate {
  filter: saturate(7);
}
.sepia {
  filter: sepia(100%);
}
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}

Kendi kendine deneyin

Tarayıcı desteği

Tablo, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Prefix'i kullanan ilk sürümü gösteren -webkit- ile başlayan sayılar.

Chrome IE / Edge Firefox Safari Opera
53.0
18.0 -webkit-		 13.0 35.0 9.1
6.0 -webkit-		 40.0
15.0 -webkit-

Yorum:Daha eski Internet Explorer sürümleri (4.0'dan 8.0'a kadar) terkedilmiş standart "filter" özelliğini destekler. IE8 ve daha düşük sürümler için destek gerektiğinde, genellikle şeffaflık için kullanılır.