>웹 프론트엔드 >CSS 튜토리얼 >이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하는 방법은 무엇입니까?

이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-09 04:33:02726검색

How to Disable Antialiasing When Scaling Images?

이미지 크기를 조정할 때 앤티앨리어싱 비활성화

배경

이미지를 확대할 때 앤티앨리어싱을 사용하여 픽셀 간 부드러운 전환을 만들어 들쭉날쭉한 가장자리를 줄이는 경우가 많습니다. . 그러나 어떤 경우에는 특히 픽셀 아트나 블록형 그래픽을 처리할 때 단단한 가장자리를 유지하는 것이 바람직할 수 있습니다.

CSS 솔루션

전통적으로 CSS에는 앤티앨리어싱을 비활성화하는 특정 플래그가 없습니다. 그러나 여러 공급업체별 속성에서 이 기능을 제공할 수 있습니다.

  • image-rendering: -moz-crisp-edges; (Firefox)
  • 이미지 렌더링: -o-crisp-edges; (오페라)
  • 이미지 렌더링: -webkit-optimize-contrast; (Chrome 및 Safari)
  • -ms-보간-모드: 최근접 이웃; (IE8 )

이러한 속성을 이미지에 적용하면 선명한 가장자리에 우선 순위를 부여하고 앤티앨리어싱 효과를 줄입니다.

구현

모든 배경 이미지에 대해 앤티앨리어싱을 비활성화하려면 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;
}

CSS가 아닌 솔루션

CSS가 가장 간단한 솔루션을 제공하지만 배경 이미지에서는 항상 작동하지 않을 수도 있습니다. 이러한 경우 JavaScript 또는 이미지 편집 도구와 같은 대체 방법을 고려할 수 있습니다.

  • HTMLCanvasElement: imageSmoothingEnabled 매개변수가 false로 설정된 drawImage() 메서드를 사용하세요.
  • ImageMagick: -filter NearestNeighbor 옵션을 이미지.

위 내용은 이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.