Scala CSS sprite pixel art senza smoothing dell'immagine

Question

Sto cercando di ridimensionare le immagini artistiche di css sprite pixel e di disabilitare COMPLETAMENTE l'anti-aliasing/livellamento dell'immagine.

Per questo post qui: Disable antialising when scaling images Ho provato quanto segue css

image-rendering: optimizeSpeed;    
image-rendering: -moz-crisp-edges;   
image-rendering: -o-crisp-edges;   
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;  
-ms-interpolation-mode: nearest-neighbor; 

Ha funzionato esattamente come avrei voluto in Firefox, ma in Chrome e OSSIA aiuta un po ', ma alcune interpolazioni/smoothing/anti-aliasing dell'immagine si verificano ancora.

Non sto volendo utilizzare un elemento canvas, ma preferisco semplicemente attenermi agli sprite dell'immagine di sfondo CSS.

C'è un modo per ottenere gli stessi risultati di "-moz-crisp-edges" negli altri browser?

Answer 1

La cattiva notizia:

Purtroppo, sembra che le opzioni sono sia utilizzando la tela, utilizzando JavaScript, o che vivono con l'anti-aliasing in Chrome e OSSIA

Ecco alcune risposte che potrebbero aiutarvi con uno degli altri due, se non si sceglie di vivere con l'anti-aliasing:

vicini:

1. Javascript-Only Solution - Old, slow, but works everywhere
2. Canvas solution - New, quicker, doesn't work in non-compliant browsers

Sor non ci sono notizie migliori per te su questo.