如何停用影像抗鋸齒並實現銳利邊緣？

如何在沒有平滑過渡的情況下禁用圖像抗鋸齒

在圖像縮放中，抗鋸齒在平滑像素邊緣方面起著至關重要的作用，從而導致視覺上令人愉悅的效果。然而，在某些情況下，您可能希望獲得清晰、不模糊的影像而不需要抗鋸齒。

問題：

使用 CSS 屬性放大圖片時"背景大小，」抗鋸齒可能會導致邊緣模糊，如下圖所示：

[模糊的圖像具有抗鋸齒功能的圖像]

期望結果：

禁用抗鋸齒並保留銳利邊緣，如下圖所示：

[具有銳利效果的清晰影像的影像邊緣]

解決方案：

要克服此問題並獲得所需的結果，請將以下CSS 程式碼應用到目標圖片：

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+                           */
}

此程式碼在所有主要瀏覽器中停用抗鋸齒功能，確保保留清晰的圖片邊緣，而無需任何平滑過渡。

以上是如何停用影像抗鋸齒並實現銳利邊緣？的詳細內容。更多資訊請關注PHP中文網其他相關文章！