En son web geliştirme öğreticiler
 

Style filter Property

<Stil Nesne

Örnek

Siyah ve beyaz bir görüntünün rengini değiştirme (100% grayscale) :

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

// Code for Chrome, Safari and Opera
document.getElementById("myImg").style.WebkitFilter = "grayscale(100%)";
Kendin dene "

Tanımı ve Kullanımı

Filtre özelliği, görsel etkileri ekler (like blur and saturation) resimlere.

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 6.0 Webkit 15.0 Webkit

Not: Chrome, Safari ve Opera bir alternatif, WebkitFilter özelliğini desteklemez.

Sözdizimi

Filtre özelliği Dönüş:

object .style.filter

Filtre özelliğini ayarlayın:

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

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
Yok Hiçbir etkisi belirtir
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.
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.
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.
bulunan açılan 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) .
Öneri: Bu filtre benzer kutu gölge özelliği.
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.
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.
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.
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.
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.
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.

Teknik detaylar

CSS Sürüm CSS3

İlgili Sayfalar

CSS referansı: filter property

<Stil Nesne