이미지에 대한 앤티앨리어싱을 비활성화하고 선명한 가장자리를 얻는 방법은 무엇입니까?

부드러운 전환이 없는 이미지에 대해 앤티앨리어싱을 비활성화하는 방법

이미지 크기 조정에서 앤티앨리어싱은 픽셀 가장자리를 부드럽게 만드는 데 중요한 역할을 합니다. 시각적으로 기분 좋은 효과. 그러나 특정 상황에서는 앤티앨리어싱 없이 선명하고 흐릿하지 않은 이미지가 필요할 수 있습니다.

문제:

CSS 속성을 사용하여 이미지의 크기를 확대할 때 " 배경 크기", 앤티앨리어싱을 사용하면 다음 이미지에 표시된 것처럼 가장자리가 흐릿해질 수 있습니다.

[배경 크기가 흐릿한 이미지 이미지 앤티앨리어싱]

원하는 결과:

아래 그림과 같이 앤티앨리어싱을 비활성화하고 선명한 가장자리를 유지합니다.

[선명한 이미지와 선명한 이미지 edge]

해결책:

이 문제를 극복하고 원하는 결과를 얻으려면 다음 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!