[CSS] 이미지 흐림 현상

이미지를 원래의 사이즈 혹은 사이즈의 배수에 해당하지 않는 사이즈로 넣지 않을 경우 이미지가 흐려보이는 경우가 많은데, 아래 속성들을 적용함으로써 이미지가 흐리게 나오는 현상을 많이 해소할 수 있습니다.

      

      

      

    
    

      <css />
    
img {
    /* 이미지 렌더링 방식 변경 */
    image-rendering: -webkit-optimize-contrast;
    /* z축을 0으로 초기화, 입체감 삭제 */
    transform: translateZ(0);
    /* 뒷면 숨기기, 입체감 삭제 */
    backface-visibility: hidden;
}

 

해당 포스팅은 이 글을 참고하여 작성했습니다.