Bagaimana untuk Melumpuhkan Anti-Aliasing dalam Penskalaan Imej untuk Tepi Tajam?

Melumpuhkan Anti-Aliasing dalam Penskalaan Imej

Cabaran untuk melumpuhkan anti-aliasing semasa penskalaan imej timbul apabila imej kelihatan kabur atau diinterpolasi semasa penskalaan . Ini berlaku kerana penyemak imbas menggunakan teknik anti-aliasing untuk melicinkan tepi imej, menghasilkan penampilan yang lembut.

Syukurlah, CSS menyediakan pelbagai bendera yang boleh melumpuhkan anti-aliasing dengan berkesan. Walau bagaimanapun, walaupun bendera yang dicadangkan, seperti pemaparan imej: -moz-crisp-edges, ia cenderung tidak berkesan untuk imej latar belakang.

Untuk mengatasi pengehadan ini, coretan kod berikut menawarkan penyelesaian komprehensif yang berfungsi merentas semua penyemak imbas utama:

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

}

Coretan kod ini menggunakan berbilang bendera khusus penyemak imbas, termasuk -moz-crisp-edges untuk Firefox, -o-crisp-edges untuk Opera dan -webkit-optimize-contrast untuk Chrome dan Safari. Selain itu, ia menggunakan nilai piksel untuk sokongan universal sejak 2021, dan kontras optimum untuk keserasian CSS3. Akhir sekali, ia termasuk -ms-interpolation-mode: nearest-jiran untuk Internet Explorer 8 dan ke atas.

Dengan memasukkan kod ini, anda boleh mengekalkan tepi yang tajam dengan berkesan dan menghalang interpolasi imej semasa penskalaan, menghasilkan kod yang tajam dan penampilan piksel seperti yang dikehendaki.

Atas ialah kandungan terperinci Bagaimana untuk Melumpuhkan Anti-Aliasing dalam Penskalaan Imej untuk Tepi Tajam?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!