2013-04-02 17 views
6

Niedawno zaktualizowałem Chrome do wersji 26, a zdjęcia, które były wyświetlane przy użyciu płótna HTML5, nie były już widoczne. Jak się okazało, musiałem zmienić jasność i kontrast.Domyślne wartości filtra CSS dla jasności i kontrastu

W jaki sposób wartości dla filtrów CSS dla CSS różnią się w zależności od silnika przeglądarki?

Domyślnie:

Brightness: 0; contrast 100: Firefox ? 
Brightness:100; contrast:100: Chrome ? 

Jak dowiedziałem się, że jest to faktycznie bug fix dla Chrome: https://code.google.com/p/chromium/issues/detail?id=168004

Odpowiedz

7

znalazłem to i będzie to na pewno pomoże. Składnia jest podobna do tej.

.thing_you_want_to_filter { 
    /* 
    these are all default values, note that hue-rotate and blur have units. 
    You'll also need to include the vendor prefixes. 
    */ 
    filter: grayscale(0); 
    filter: sepia(0); 
    filter: saturate(1); 
    filter: hue-rotate(0deg); 
    filter: invert(0); 
    filter: opacity(1); 
    filter: brightness(0); 
    filter: contrast(1); 
    filter: blur(0px); 

    /* Drop shadow has the same syntax as box-shadow – see below for why it's amazing! */ 
    filter: drop-shadow(5px 5px 10px #ccc); 
} 

Chrome 18.0+ i Safari 6+ to jedyne przeglądarki, które obsługują to. Na Safari pod wersji 6 to byłoby tak:

.img 
{ 
    -webkit-filter:contrast(100%); /* play with the percentages */ 
    -webkit-filter:brightness(100%); 
} 

Możesz przeczytać źródeł sobie

http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/ http://css3.bradshawenterprises.com/filters/

+0

miłe. Jak nie ma dodatku do Firefoksa do regulacji wyświetlania obrazów !? - nie byłoby trudno zrobić z płótnem i wygląda na to, że jest to również możliwe z css. – NoBugs