Mungkin Duplikat: Bagaimana untuk meregangkan gambar tanpa antialiasing
Apakah dalam setiap cara yang mungkin untuk menonaktifkan antialiasing ketika scaling up gambar ?
Sekarang, aku mendapatkan sesuatu yang terlihat seperti ini :
Menggunakan kode css :
#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}
Apa yang saya inginkan, adalah sesuatu seperti ini :
Singkatnya, setiap CSS bendera menonaktifkan anti-aliasing dari ketika scaling up gambar, melestarikan tepi keras.
Javascript hacks atau mirip juga welcome.
(Ya, saya sadar bahwa php dan imagemagick dapat melakukan hal ini juga, tapi akan lebih memilih css berbasis solusi.)
UPDATE Berikut telah diusulkan :
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;
Tapi itu doesn't tampaknya untuk bekerja di latar belakang gambar.
Coba ini, it's perbaikan untuk menghapus itu di semua 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+ */
}
Sumber:
http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers
http://updates.html5rocks.com/2015/01/pixelated
GitaarLAB