Bagaimanakah Saya Boleh Lumpuhkan Antialiasing Apabila Menskalakan Imej dalam CSS?

Melumpuhkan Antialiasing dalam Penskalaan Imej

Apabila membesarkan imej, antialiasing, teknik yang melicinkan tepi piksel, sering digunakan untuk mengurangkan pikselasi. Walau bagaimanapun, dalam beberapa kes, adalah wajar untuk mengekalkan tepi tajam, menjadikan antialiasing tidak diingini.

Dalam CSS, tiada bendera langsung untuk melumpuhkan antialiasing. Walau bagaimanapun, gabungan sifat boleh mencapai kesan yang serupa:

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

Sifat pemaparan imej menetapkan algoritma pemaparan imej. Nilai optimSpeed ​​mengutamakan kelajuan berbanding kualiti, menghasilkan tepi berpiksel. Nilai -moz-crisp-edges, -o-crisp-edges, dan -webkit-optimize-contrast khusus penyemak imbas turut menyumbang kepada visual yang rangup.

Selain itu, berpiksel, mengoptimumkan-kontras dan -ms- mod interpolasi: jiran terdekat memastikan pemaparan piksel merentas pelbagai penyemak imbas, termasuk IE8 .

Dengan menggunakan sifat ini, imej boleh ditingkatkan tanpa pelicinan yang tidak diingini yang diperkenalkan dengan antialiasing, mengekalkan garis besarnya yang tajam.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Lumpuhkan Antialiasing Apabila Menskalakan Imej dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!