Quy mô CSS sprite pixel art mà không làm mịn hình ảnh

Question

Tôi đang cố gắng mở rộng các ảnh nghệ thuật pixel sprite css và muốn hoàn toàn vô hiệu hóa tính năng chống răng cưa/làm mịn hình ảnh.

mỗi bài này ở đây: Disable antialising when scaling images Tôi đã thử các css sau

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; 

Nó hoạt động giống hệt như tôi muốn trong firefox, tuy nhiên trong Chrome và I.E. nó giúp một chút, nhưng một số nội suy hình ảnh/làm mịn/chống răng cưa vẫn còn xảy ra.

Tôi không muốn sử dụng phần tử canvas, mà chỉ cần gắn với các hình ảnh nền CSS.

Có cách nào để thực hiện các kết quả tương tự như “mút-cạnh sắc nét” trong các trình duyệt khác không?

Answer 1

Tin xấu:

Thật không may, có vẻ như lựa chọn của bạn đang sử dụng vải, sử dụng JavaScript hoặc living with the anti-aliasing trong Chrome và I.E.

Dưới đây là một số phản ứng có thể giúp bạn với một trong hai người còn lại nếu bạn không chọn cách sống chung với các anti-aliasing:

Links:

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

Sor ry không có tin tốt hơn cho bạn về điều này.