在影像縮放中停用抗鋸齒

當影像在縮放時出現模糊或插值時，就會出現在影像縮放期間停用抗鋸齒的挑戰。出現這種情況是因為瀏覽器應用抗鋸齒技術來平滑影像邊緣，從而產生柔和的外觀。

值得慶幸的是，CSS 提供了一系列可以有效禁用抗鋸齒的標誌。然而，儘管有建議的標誌，例如 image-rendering: -moz-crisp-edges，它們對於背景圖像往往無效。

為了克服這個限制，以下程式碼片段提供了一個有效的全面解決方案跨所有主要瀏覽器：

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;                 /* Universal support since 2021   */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8                            */

}

此程式碼片段使用多個特定於瀏覽器的標誌，包括適用於Firefox 的-moz-crisp-edges、適用於Opera 的-o-crisp-edges 以及適用於Chrome 和Safari 的- webkit-optimize-contrast。此外，它自 2021 年起採用像素化值來實現普遍支持，並採用最佳化對比度來實現 CSS3 相容性。最後，它包括 -ms-interpolation-mode: Internet Explorer 8 及更高版本的最近鄰。

透過合併此程式碼，您可以有效地保留銳利邊緣並防止縮放過程中的影像插值，從而產生清晰且清晰的影像。根據需要像素化外觀。