シャープエッジの画像スケーリングでアンチエイリアスを無効にする方法は?

画像のスケーリングでアンチエイリアスを無効にする

画像のスケーリング時に画像がぼやけたり補間されたりする場合、画像のスケーリング中にアンチエイリアスを無効にするという課題が発生します。 。これは、ブラウザが画像のエッジを滑らかにするアンチエイリアス技術を適用し、その結果、外観が柔らかくなったために発生します。

ありがたいことに、CSS には、アンチエイリアスを効果的に無効にできるさまざまなフラグが用意されています。ただし、image-rendering: -moz-crisp-edges などの推奨フラグにもかかわらず、これらは背景画像には効果がない傾向があります。

この制限を克服するために、次のコード スニペットは機能する包括的なソリューションを提供します。すべての主要なブラウザ:

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

}

このコード スニペットは、Firefox の -moz-crisp-edges、Opera の -o-crisp-edges、および -webkit-optimize-contrast など、複数のブラウザ固有のフラグを利用します。 ChromeとSafariの場合。さらに、2021 年以降のユニバーサル サポートのためにピクセル化された値を採用し、CSS3 互換性のためにコントラストを最適化します。最後に、Internet Explorer 8 以降の -ms-interpolation-mode:nearest-neighbor が含まれています。

このコードを組み込むことにより、シャープなエッジを効果的に保持し、スケーリング中の画像補間を防ぐことができ、その結果、鮮明な画像が得られます。希望通りのピクセル化された外観。

以上がシャープエッジの画像スケーリングでアンチエイリアスを無効にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。