이미지를 원래의 사이즈 혹은 사이즈의 배수에 해당하지 않는 사이즈로 넣지 않을 경우 이미지가 흐려보이는 경우가 많은데, 아래 속성들을 적용함으로써 이미지가 흐리게 나오는 현상을 많이 해소할 수 있습니다.
img {
/* 이미지 렌더링 방식 변경 */
image-rendering: -webkit-optimize-contrast;
/* z축을 0으로 초기화, 입체감 삭제 */
transform: translateZ(0);
/* 뒷면 숨기기, 입체감 삭제 */
backface-visibility: hidden;
}
해당 포스팅은 이 글을 참고하여 작성했습니다.
'HTML·CSS' 카테고리의 다른 글
[CSS] PC와 Mobile 구분 방법 (0) | 2023.05.07 |
---|---|
[CSS] input 태그 자동완성 사용시 스타일이 변경되는 이슈 (0) | 2023.05.01 |
[CSS] border-width가 변경될 때 레이아웃이 틀어지는 이슈 (0) | 2023.04.23 |
[CSS] 미디어쿼리 새로운 문법 (0) | 2023.04.17 |
[CSS] 텍스트 세로 나열 (0) | 2023.04.10 |