画像のアンチエイリアスを無効にしてシャープなエッジを実現するにはどうすればよいですか?

スムーズトランジションのない画像のアンチエイリアスを無効にする方法

画像のスケーリングでは、アンチエイリアスはピクセルのエッジを滑らかにする上で重要な役割を果たします。視覚的に楽しい効果。ただし、特定の状況では、アンチエイリアスを使用せずに鮮明でぼやけのない画像が必要な場合があります。

問題:

CSS プロパティ " を使用して画像を拡大する場合背景サイズ、" アンチエイリアスを使用すると、次の画像に示すように、エッジがぼやける場合があります:

[アンチエイリアスを使用したぼやけた画像の画像]

望ましい結果:

以下に示すように、アンチエイリアスを無効にし、シャープなエッジを保持します:

[シャープなエッジを持つ鮮明な画像の画像]

解決策:

この問題を克服して望ましい結果を達成するには、次の CSS コードをターゲット画像に適用します:

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

このコードは、すべての主要なブラウザでアンチエイリアスを無効にし、滑らかな遷移を行わずに鮮明な画像エッジを確実に保持します。 .

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