resim olustur
Resim: CSS ile düzenleme
İşte bazı örnekler filtre.
Vurgulu ile tüm fotoğrafları sağladık, ne zaman üzerinde orijinal fotoğraf görmek için fare.
Kullanıcı Internet Explorer 9 ile (ve aşağı) bkz: herhangi bir etkisi.
Orijinal fotoğraf.
Ağustos 2015 yılında derin Kuzey Frisia.
Burada gri filtreli
filtre: grayscale(100%);
%0 değeri değişmeden görüntü yapar.
Burada kontrast filtresi ile
filtre: contrast(140%);
%0 gri görüntü tarafından oluşturulan değeri.
Görüntü değişmeden % 100 yaprak değer.
üzerinde % 100 karanlık kontrast etkileri
Burada gölge ile
filtre: damla-shadow(16px 16px 10px black);
Üçüncü 10px fade etki için değeridir
yumuşak veya sert gölgeler edge için
Burada ton rotasyon ile
filtre: hue-rotate(90deg);
Değer (0deg) görüntüyü değiştirmeden bırakır.
(360 derece) en yüksek değerdir.
Özgün renklerini tersine çevirme
filtre: invert(100%);
%0 değeri değişmeden görüntü yapar.
% 100 üretilen tamamen ters görüntü.
Şeffaflık
filtre: opacity(50%);
0 değerini tamamen şeffaf % =.
Görüntü değişmeden % 100 yaprak değer.
Doygunluk (renk)
filtre: saturate(200%);
%0 değeri yok renkler =.
Görüntü değişmeden % 100 yaprak değer.
Değerleri = %100 daha canlı renkler
Etkisi
filtre: sepia(100%);
Görüntü değişmeden % 0 yaprakları değer.
% 100 tam etkisi =
Grnty
dönüşümü: rotate(20deg);
Değer (0deg) görüntüyü değiştirmeden bırakır.
En büyük değer (360 derece).
Nasıl ben bir etkisi benim resim eklemek?
Sayfa içeriği görüntüde olsaydı...
- kadarkaynak kodu"(araç çubuğu) düzenleyicisinde tıklatın
-sayfa içerik şimdi HTML kodu olarak görüntülenir
-biz HTML resim kodu için an
-o görünüyor:
biz eklemek şimdi istenen özellik a: ile
<img src="Grafikadresse alt="Bild" />
<img style="filter: sepia(100%);" src="Grafikadresse alt="Bild" />
Normal Resim görüntüsü ne zaman fareyi?
-sayfanın HTML Kod görünümünde kal
-ile içerik sayfasının başında aşağıdaki CSS kodu ekleyin:
<style type="text/css">
img { transition: all 0.5s linear; }
img:hover {filter: none!important;}
</style>