Domanda Disattiva l'antializzazione quando ridimensiona le immagini [duplicato]


Possibile duplicato:
Come allungare le immagini senza antialiasing 

È in alcun modo possibile disabilitare l'antialias quando si ridimensiona un'immagine?

In questo momento, ottengo qualcosa che assomiglia a questo:

What i get

Utilizzando il seguente codice CSS:

#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}

Quello che vorrei, è qualcosa del genere:

What i seek

In breve, qualsiasi bandiera CSS a disattivare anti-aliasing da quando si ridimensionano le immagini, preservando i bordi duri.

Anche gli hack javascript o simili sono ben accetti.

(Sì, sono consapevole che php e imagemagick possono fare anche questo, ma preferirebbero una soluzione basata su CSS).

AGGIORNARE Sono stati suggeriti i seguenti:

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

Ma non sembra funzionare su immagini di sfondo.


44
2017-12-28 10:26


origine


risposte:


Prova questo, è una soluzione per rimuoverlo in tutti i browser.

img { 
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                           */

}

fonti:

http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

http://updates.html5rocks.com/2015/01/pixelated

GitaarLAB


94
2017-12-28 10:37



CSS in cui funziona Solo Firefox:

img { image-rendering: -moz-crisp-edges; } 

Ha funzionato per me (firefox 16.0) enter image description here


7
2017-12-28 10:32