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;
}

이미지 렌더링 속성은 이미지의 렌더링 알고리즘을 설정합니다. OptimizeSpeed ​​값은 품질보다 속도를 우선시하므로 가장자리가 픽셀화됩니다. 브라우저별 -moz-crisp-edges, -o-crisp-edges 및 -webkit-optimize-contrast 값도 선명한 시각적 효과에 기여합니다.

추가로 pixelated,optim-contrast 및 -ms- 보간 모드: 최근접 이웃은 IE8을 포함한 다양한 브라우저에서 픽셀화된 렌더링을 보장합니다.

이를 적용하여 속성을 사용하면 앤티앨리어싱으로 인한 원치 않는 부드러움 없이 이미지의 크기를 확대하여 선명한 윤곽선을 유지할 수 있습니다.

위 내용은 CSS에서 이미지 크기를 조정할 때 앤티앨리어싱을 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!