2016-02-03 9 views
6

Dato un elemento <img>, è possibile pixelare l'immagine utilizzando solo CSS e/o non utilizzare la tela? Ho visto cose come la funzione crisp edges (ma è solo per le immagini ridimensionate) e molte opzioni di tela, ma spero in un modo migliore.È possibile pixelare un'immagine senza tela?

+2

Questa non sembra una richiesta per una risorsa. Sta chiedendo le tecniche CSS. – isherwood

+3

La domanda è perfettamente valida. 'image-rendering: pixelated;' https://developer.mozilla.org/en/docs/Web/CSS/image-rendering – Pogrindis

risposta

3

È possibile ottenere un effetto pixel utilizzando la regola CSS image-rendering: pixelated; e ridimensionando un'immagine - see this article.

+0

Quindi, se voglio mantenere l'immagine alle sue dimensioni naturali, cosa suggeriresti? Ridimensionandolo, applicando il 'image-rendering', e quindi ridimensionandolo alla sua dimensione originale? O c'è un modo più semplice? –

+0

Ciò funzionerebbe anche se dovessi ritagliare parte dell'immagine (sebbene sia pixelata). Puoi anche provare a salvare l'immagine sorgente in una dimensione più piccola di quella che effettivamente ti serve per apparire sul tuo sito, applicare 'image-rendering: pixelate;', e ridimensionarla alla dimensione desiderata. – Donald

+0

Sì, questo è il problema, non avrò il controllo sulle immagini visualizzate, quindi non posso semplicemente salvarlo a una dimensione più piccola. –