Örnek
Siyah ve beyaz tüm görüntülerin rengini değiştirme (100% gray) :
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari,
Opera */
filter: grayscale(100%);
}
Original image
grayscale(100%)
İpucu: Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Filtre özelliği görsel efektler tanımlar (like blur and saturation) bir elemana (often <img>) .
| Varsayılan değer: | Yok |
|---|---|
| Miras: | no |
| canlandırılabilir: | yes. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.WebkitFilter=" grayscale(100%) " Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
-webkit- ardından Numaraları önek ile çalıştı ilk sürümü belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| filter | 18.0 -webkit- | 13.0 | 35.0 | 9.1 6.0 -webkit- | 15.0 -webkit- |
Not: Internet Explorer'ın eski sürümleri (4.0 to 8.0) standart olmayan desteklenen "filter" kullanımdan kaldırıldı özelliği. Bu daha çok için kullanılmıştır opaklık IE8 ve aşağı destek gerektiğinde.
CSS sözdizimi
filter:
none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate()
| invert() | opacity() | saturate() | sepia() | url();Öneri: her bir boşlukla filtre ayırın birden filtreleri kullanmak için (See "More Examples" below) .
Filtre İşlevleri
Not: Bu yüzde değerlerini kullanmak filtreler (ie 75%) , aynı zamanda ondalık olarak değeri kabul (ie 0.75) .
| filtre | Açıklama | Oynat |
|---|---|---|
| none | Varsayılan değer. Hiçbir etkisi belirtir | Oynat " |
| blur( px ) | Resme bulanıklık efekti uygular. Daha büyük değerler daha bulanıklık yaratacaktır. Belirtilen değer ise, 0 kullanılır. | Oynat " |
| brightness( % ) | Görüntünün parlaklığını ayarlar. 0% görüntü tamamen siyah yapacaktır. % 100 (1) , varsayılan ve orijinal görüntü temsil eder. % 100'ün üzerinde değerler daha parlak sonuçlar verecektir. | Oynat " |
| contrast( % ) | Görüntü kontrastını ayarlar. 0% görüntü tamamen siyah yapacaktır. % 100 (1) , varsayılan ve orijinal görüntü temsil eder. % 100'ün üzerinde değerler daha az kontrasta sahip sonuçları sağlar. | Oynat " |
| drop- shadow( h-shadow v-shadow blur spread color ) | Resme gölge efekti uygular. Olası değerler: h-gölge - Gereklidir. Yatay gölge için bir piksel değerini belirler. Negatif değerler görüntünün solundaki gölge yerleştirin. v-gölge - Gereklidir. Dikey gölge için bir piksel değerini belirler. Negatif değerler resmin üzerine gölge yerleştirin. bulanıklık - İsteğe bağlı. Bu üçüncü bir değerdir ve piksel olmalıdır. gölge bulanıklık efekti ekler. Daha büyük değerler daha bulanıklık (gölge daha büyük ve daha hafif hale gelir) yaratacaktır. Negatif değerler izin verilmez. Belirtilen değer ise, 0 (gölgenin kenarı keskin) kullanılır. yayılmış - İsteğe bağlı. Bu dördüncü bir değerdir ve piksel olmalıdır. Pozitif değerler gölge genişletmek ve daha büyük büyümesine neden olur, negatif değerler gölge küçülmeye neden olacaktır. Belirtilmediği takdirde, bu 0 olur (the shadow will be the same size as the element) . Not: Chrome, Safari ve Opera ve belki diğer tarayıcılar, bu 4 uzunluğu desteklemez; katma eğer hale olmayacaktır. Renk - İsteğe bağlı. Gölgenin bir renk ekler. Belirtilmezse, renk tarayıcıya bağlıdır (often black) . 10px bir bulanıklık etkisiyle, hem yatay hem de dikey olarak 8px büyük kırmızı gölge oluşturulması bir örneği: Filtre: bulunan açılan shadow(8px 8px 10px red) ; Öneri: Bu filtre benzer kutu gölge özelliği. | Oynat " |
| grayscale( % ) | gri tonlama için görüntü dönüştürür. % 0 (0) varsayılan ve orijinal görüntü temsil eder. % 100 tamamen gri görüntü yapacaktır (used for black and white images) . Not: Negatif değerler izin verilmez. | Oynat " |
| hue- rotate( deg ) | görüntü üzerinde bir renk dönüşü uygular. değeri edilmiş örnekler ayarlanacaktır renkli daire etrafında derece sayısını tanımlar. 0deg varsayılan ve orijinal resmi temsil eder. Not: Maksimum değer 360deg olduğunu. | Oynat " |
| invert( % ) | Resimde örnekleri ters çevirir. % 0 (0) varsayılan ve orijinal görüntü temsil eder. % 100 görüntü tamamen ters yapacaktır. Not: Negatif değerler izin verilmez. | Oynat " |
| opacity( % ) | görüntü için opaklık düzeyini ayarlar. opaklık düzeyinde saydamlık seviyesi açıklanmaktadır: % 0 tamamen saydamdır. % 100 (1) , varsayılan ve orijinal görüntüyü temsil eden (no transparency) . Not: Negatif değerler izin verilmez. Öneri: Bu filtre benzer opaklık özelliği. | Oynat " |
| saturate( % ) | Görüntüyü doyurur. % 0 (0) görüntü tamamen un doymuş yapacaktır. % 100 varsayılan ve orijinal resmi temsil eder. % 100'ün üzerinde değerler süper doygun sonuçlar sağlar. Not: Negatif değerler izin verilmez. | Oynat " |
| sepia( % ) | sepya görüntüyü dönüştürür. % 0 (0) varsayılan ve orijinal görüntü temsil eder. % 100 görüntü tamamen sepya yapacaktır. Not: Negatif değerler izin verilmez. | Oynat " |
| url() | url() fonksiyonu bir SVG filtre belirten bir XML dosyasının konumunu alır ve belirli bir filtre elemanının bir çapa içerebilir. Örnek: Filtre: url(svg-url#element-id) | |
| initial | varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun | |
| inherit | üst öğesinden bu özelliği devralır. Yaklaşık miras oku |
Diğer Örnekler
bulanıklık Örnek
Resme bulanıklık efekti uygula:
img {
-webkit-filter: blur(5px); /* Chrome, Safari,
Opera */
filter: blur(5px);
}
Original image
blur(5px)
Parlaklık Örnek
Görüntünün parlaklığını ayarlayın:
img {
-webkit-filter: brightness(200%); /* Chrome, Safari,
Opera */
filter: brightness(200%);
}
Original image
brightness(200%)
Örnek Kontrast
Görüntünün kontrastını ayarlar:
img {
-webkit-filter: contrast(200%); /* Chrome, Safari,
Opera */
filter: contrast(200%);
}
Original image
contrast(200%)
Gölge Örneği
Resme gölge efekti uygulayın:
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari,
Opera */
filter: drop-shadow(8px 8px 10px red);
}
Original image
drop- shadow(8px 8px 10px red)
Gri Ölçeği Örnek
tonlamalı görüntüyü dönüştürme:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari,
Opera */
filter: grayscale(50%);
}
Original image
grayscale(50%)
Renk Dönme Örnek
görüntü üzerinde bir ton dönüşünü uygula:
img {
-webkit-filter: hue-rotate(90deg); /* Chrome, Safari,
Opera */
filter: hue-rotate(90deg);
}
Original image
hue- rotate(90deg)
ters çevirme Örnek
Görüntüdeki örnekleri tersine çevirme:
img {
-webkit-filter: invert(100%); /* Chrome, Safari,
Opera */
filter: invert(100%);
}
Original image
invert(100%)
opaklık Örnek
görüntü için opaklık düzeyini ayarlama:
img {
-webkit-filter: opacity(30%); /* Chrome, Safari,
Opera */
filter: opacity(30%);
}
Original image
opacity(30%)
Doymuş Örnek
Görüntüyü Doygunluk:
img {
-webkit-filter: saturate(800%); /* Chrome, Safari,
Opera */
filter: saturate(800%);
}
Original image
saturate(800%)
Kahverengi Örnek
sepya görüntü dönüştürme:
img {
-webkit-filter: sepia(100%); /* Chrome, Safari,
Opera */
filter: sepia(100%);
}
Original image
sepia(100%)
Birleştirme Filtreler / Çoklu Filtreler
Çoklu filtreleri kullanmak için, her bir boşlukla filtre ayırın.
Not: Sipariş önemlidir (ie using grayscale() sonra sepia() tamamen gri görüntüde sonuçlanacaktır).
img {
-webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari,
Opera */
filter: contrast(200%) brightness(150%);
}
Original image
contrast(200%) brightness(150%)
Tüm filtreler
Tüm filtre işlevlerinin bir tanıtımı:
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter:
brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter:
contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter:
grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter:
hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter:
invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter:
opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter:
saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter:
sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter:
drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
} Kendin dene " İlgili Sayfalar
HTML DOM referansı: filter property