Wie kann ich Antialiasing für Bilder deaktivieren und scharfe Kanten erzielen?

So deaktivieren Sie Antialiasing für Bilder ohne glatte Übergänge

Bei der Bildskalierung spielt Antialiasing eine entscheidende Rolle beim Glätten von Pixelkanten, was zu ein optisch ansprechender Effekt. In bestimmten Situationen wünschen Sie sich jedoch möglicherweise ein scharfes, nicht verwackeltes Bild ohne Antialiasing.

Problem:

Wenn ein Bild mithilfe der CSS-Eigenschaft „skaliert“ wird Hintergrundgröße“ kann Antialiasing zu unscharfen Kanten führen, wie im folgenden Bild dargestellt:

[Bild eines unscharfen Bildes mit Antialiasing]

Gewünschtes Ergebnis:

Antialiasing deaktivieren und scharfe Kanten beibehalten, wie unten dargestellt:

[Bild eines gestochen scharfen Bildes mit scharfen Kanten]

Lösung:

Um dieses Problem zu beheben und das gewünschte Ergebnis zu erzielen, wenden Sie den folgenden CSS-Code auf das Zielbild an:

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

Dieser Code deaktiviert Antialiasing in allen gängigen Browsern und sorgt so dafür, dass scharfe Bildkanten ohne glättende Übergänge erhalten bleiben .

Das obige ist der detaillierte Inhalt vonWie kann ich Antialiasing für Bilder deaktivieren und scharfe Kanten erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!