Soru internet explorer 10 - gri tonlamalı filtre nasıl uygulanır?


Bu CSS kodu, Internet Explorer için 9'a kadar gayet güzel çalışıyor.

img.gray {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(1);
}

Ama Internet Explorer 10 için ne yapmam gerekiyor?


33
2018-02-11 13:36


Menşei




Cevaplar:


IE10 DX filtrelerini desteklemiyor IE9 ve daha önce yapmış olduğumuz gibi, gri tonlamalı filtrenin önekli bir sürümünü de desteklememektedir.

Ancak, gri tonlama işlemini gerçekleştirmek için IE10'da bir SVG yer paylaşımı kullanabilirsiniz. Örnek:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

(Kaynak: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

Basitleştirilmiş JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/

IE10 SVG filtre efektleri hakkında daha fazla bilgi: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx


30
2018-02-11 18:59



bu tavsiye için teşekkürler - jellobird
CSS'deki resim URL'sine başvurmadan bunu gerçekleştirmenin bir yolu yok mu? Birden fazla resim içeren bir sayfada çalışmayı denemeye çalışıyorum, bu yüzden her görüntüyü <başlıktaki> CSS'ye ekleyebileceğimi düşünürüm ... Oldukça bir sıkıntı ama sonra IE! - patrickzdb
Bunu yeni bir soru olarak sormalısınız. Buraya bir bağlantı ekleyin, ancak örnek kodun (Q’da ve jsFiddle’da) olduğundan emin olun, böylece birisi neyi hedeflediğinizi anlayabilir. URL'sini kullanmadan görüntüye nasıl referans göstermeyi beklediğiniz konusunda kafam karıştı. - KatieK
kısacası: hayır, IE'de, sane tarayıcılarında olduğu gibi HTML görüntülerine SVG filtreleri uygulayamazsınız. - Spongman


Inline SVG, IE 10 ve 11 ve Edge 12'de kullanılabilir.

Bu tarayıcılar için bir polyfill içeren gri adlı bir proje oluşturdum. Polyfill geçer <img> satır içi SVG içeren etiketler: https://github.com/karlhorky/gray

Uygulamak için, kısa sürüm yukarıdaki GitHub bağlantısında jQuery eklentisini indirmek ve vücudunuzun sonunda jQuery'den sonra eklemektir:

<script src="/js/jquery.gray.min.js"></script>

Sonra sınıftaki her görüntü grayscale gri olarak görünecektir.

<img src="/img/color.jpg" class="grayscale">

Yapabilirsin bir demo görmek eğer istersen.


20
2018-02-12 22:28



Bu gerçekten karşılaştığım en iyi gri tonlamalı JS eklentisi ve yaklaşık 5, iyi iş çalıştı! - Karolis Ramanauskas
Şerefe, yardım ettiğine sevindim! - Karl Horky
2015'ten itibaren, teşekkür ederim! Bu eklenti bir hayat kurtarıcı, ben son iki gün boyunca bu tür bir çözümü tam olarak aradığım için internette dolaşıyorum. Teşekkür ederim! - Singular1ty
Sen bir hayat kurtarıcısın. Mükemmel çalıştı. Çok teşekkür ederim. - Aditya
Hiç sorun değil, yardımcı olabileceğim kadar güzel! - Karl Horky


Bu jQuery eklentisini kullan https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

Tek bir çapraz tarayıcı çözümü gibi görünüyor. Ayrıca güzel bir solma ve kaybolma etkisi vardır.


5
2017-11-23 20:31



Görünüşe göre, insanlar artık çalışmıyor, çünkü bağlantı artık işe yaramıyor ve bakmak için çok tembeldi. İşte yeni bir bağlantı: gianlucaguarini.github.io/jQuery.BlackAndWhite - Sygmoral
Teşekkürler! Orijinal gönderimi güncelledim. - Corni