Bagaimana untuk Melumpuhkan Antialiasing untuk Imej dan Mencapai Tepi Tajam?

Cara Melumpuhkan Antialiasing untuk Imej tanpa Peralihan Lancar

Dalam penskalaan imej, antialiasing memainkan peranan penting dalam melicinkan tepi piksel, menghasilkan kesan yang menyenangkan secara visual. Walau bagaimanapun, dalam situasi tertentu, anda mungkin menginginkan imej yang tajam dan tidak kabur tanpa antialiasing.

Masalah:

Apabila imej ditingkatkan menggunakan sifat CSS " saiz latar belakang," antialiasing boleh mengakibatkan tepi kabur, seperti yang digambarkan dalam imej berikut:

[Imej imej kabur dengan antialiasing]

Hasil yang Diingini:

Lumpuhkan antialiasing dan kekalkan tepi tajam, seperti yang digambarkan di bawah:

[Imej imej yang tajam dengan tajam tepi]

Penyelesaian:

Untuk mengatasi isu ini dan mencapai hasil yang diingini, gunakan kod CSS berikut pada imej sasaran:

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

Kod ini melumpuhkan antialiasing dalam semua penyemak imbas utama, memastikan pengekalan tepi imej yang tajam tanpa sebarang pelicinan peralihan.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Antialiasing untuk Imej dan Mencapai Tepi Tajam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!