Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie deaktiviere ich Anti-Aliasing bei der Bildskalierung für scharfe Kanten?

DDD
Freigeben: 2024-11-10 08:26:02
Original
426 Leute haben es durchsucht

How to Disable Anti-Aliasing in Image Scaling for Sharp Edges?

Anti-Aliasing bei der Bildskalierung deaktivieren

Die Herausforderung beim Deaktivieren von Anti-Aliasing während der Bildskalierung entsteht, wenn Bilder bei der Skalierung verschwommen oder interpoliert erscheinen . Dies liegt daran, dass Browser Anti-Aliasing-Techniken anwenden, um die Kanten von Bildern zu glätten, was zu einem weicheren Erscheinungsbild führt.

Zum Glück bietet CSS eine Reihe von Flags, mit denen sich Anti-Aliasing effektiv deaktivieren lässt. Doch trotz der vorgeschlagenen Flags, wie etwa image-rendering: -moz-crisp-edges, sind sie für Hintergrundbilder tendenziell unwirksam.

Um diese Einschränkung zu überwinden, bietet das folgende Code-Snippet eine umfassende Lösung, die funktioniert in allen gängigen Browsern:

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

}
Nach dem Login kopieren

Dieses Code-Snippet verwendet mehrere browserspezifische Flags, darunter -moz-crisp-edges für Firefox, -o-crisp-edges für Opera und -webkit-optimize-contrast für Chrome und Safari. Darüber hinaus verwendet es seit 2021 den Pixelwert für universelle Unterstützung und optimiert den Kontrast für CSS3-Kompatibilität. Schließlich enthält es -ms-interpolation-mode: next-neighbor für Internet Explorer 8 und höher.

Durch die Einbindung dieses Codes können Sie scharfe Kanten effektiv bewahren und Bildinterpolation während der Skalierung verhindern, was zu einem gestochen scharfen Bild führt pixeliges Erscheinungsbild nach Wunsch.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich Anti-Aliasing bei der Bildskalierung für scharfe Kanten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!