Comment désactiver l'anticrénelage dans la mise à l'échelle de l'image pour les bords nets ?

Désactivation de l'anti-aliasing dans la mise à l'échelle de l'image

Le défi de la désactivation de l'anti-aliasing lors de la mise à l'échelle de l'image se pose lorsque les images apparaissent floues ou interpolées lors de la mise à l'échelle . Cela se produit parce que les navigateurs appliquent des techniques d'anti-aliasing pour lisser les bords des images, ce qui donne une apparence adoucie.

Heureusement, CSS fournit une gamme d'indicateurs qui peuvent désactiver efficacement l'anti-aliasing. Cependant, malgré les options suggérées, telles que le rendu d'image : -moz-crisp-edges, elles ont tendance à être inefficaces pour les images d'arrière-plan.

Pour surmonter cette limitation, l'extrait de code suivant propose une solution complète qui fonctionne dans tous les principaux navigateurs :

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

}

Cet extrait de code utilise plusieurs indicateurs spécifiques au navigateur, notamment -moz-crisp-edges pour Firefox, -o-crisp-edges pour Opera et -webkit-optimize-contrast pour Chrome et Safari. De plus, il utilise la valeur pixellisée pour une prise en charge universelle depuis 2021 et optimise le contraste pour la compatibilité CSS3. Enfin, il inclut -ms-interpolation-mode : plus proche voisin pour Internet Explorer 8 et versions ultérieures.

En incorporant ce code, vous pouvez efficacement préserver les bords nets et empêcher l'interpolation de l'image lors de la mise à l'échelle, ce qui donne un résultat net et net. aspect pixelisé à souhait.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!