CSS で画像を拡大縮小するときにアンチエイリアスを無効にするにはどうすればよいですか?

画像の拡大縮小でアンチエイリアスを無効にする

画像を拡大する場合、ピクセレーションを軽減するために、ピクセルのエッジを滑らかにする技術であるアンチエイリアスが適用されることがよくあります。ただし、場合によっては、シャープなエッジを維持することが望ましく、アンチエイリアスが望ましくない場合があります。

CSS には、アンチエイリアスを無効にする直接フラグはありません。ただし、プロパティを組み合わせて同様の効果を得ることができます。

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

image-rendering プロパティは、画像のレンダリング アルゴリズムを設定します。 optimizeSpeed 値は品質よりも速度を優先するため、エッジがピクセル化されます。ブラウザ固有の -moz-crisp-edges、-o-crisp-edges、および -webkit-optimize-contrast の値も、鮮明なビジュアルに貢献します。

さらに、ピクセル化、optimize-contrast、および -ms- interpolation-mode:nearest-neighbor は、IE8 を含むさまざまなブラウザーでピクセル化されたレンダリングを保証します。

これらを適用することにより、プロパティを使用すると、アンチエイリアスによる不要な平滑化を行わずに画像を拡大し、鮮明な輪郭を維持できます。

以上がCSS で画像を拡大縮小するときにアンチエイリアスを無効にするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。