2013-04-02 13 views
6

Kürzlich habe ich Chrome auf Version 26 aktualisiert und Bilder, die mit HTML5-Canvas angezeigt wurden, waren nicht mehr sichtbar. Wie ich fand, musste ich zu Helligkeit und Kontrast wechseln.Standard-CSS-Filterwerte für Helligkeit und Kontrast

Wie unterscheiden sich die Werte für BC für CSS-Filter je nach Browser-Engine?

Standard:

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

Als ich es herausfand, ist eigentlich ein Bug-Fix für Chrome: https://code.google.com/p/chromium/issues/detail?id=168004

Antwort

7

ich diese gefunden und es wird Ihnen sicherlich helfen. Die Syntax ist in etwa so.

.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+ und Safari 6+ sind die einzigen Browser, die dies unterstützen. Für Safari unter 6 Version würde es so aussehen:

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

Sie die Quellen selbst

lesen

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

+0

Nizza. Wie gibt es kein Firefox-Addon zur Anpassung der Darstellung von Bildern? - es wäre nicht schwer mit leinwand zu machen, und es sieht so aus, als ob es auch mit css möglich ist. – NoBugs