Comment désactiver l'anticrénelage pour les images et obtenir des bords nets ?

Comment désactiver l'anticrénelage pour les images sans transitions fluides

Dans la mise à l'échelle des images, l'anticrénelage joue un rôle crucial dans le lissage des bords des pixels, ce qui entraîne un effet visuellement agréable. Cependant, dans certaines situations, vous pouvez souhaiter une image nette, non floue et sans anticrénelage.

Problème :

Lorsqu'une image est agrandie à l'aide de la propriété CSS " background-size", l'anticrénelage peut entraîner des bords flous, comme le montre l'image suivante :

[Image d'une image floue avec anticrénelage]

Résultat souhaité :

Désactivez l'anticrénelage et préservez les bords nets, comme illustré ci-dessous :

[Image d'une image nette avec des bords nets]

Solution :

Pour surmonter ce problème et obtenir le résultat souhaité, appliquez le code CSS suivant à l'image cible :

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

Ce code désactive l'anticrénelage dans tous les principaux navigateurs, garantissant ainsi la préservation des bords nets de l'image sans aucun lissage des transitions. .

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!