내 CSS 전환으로 인해 Chrome에서 이미지가 흐릿해지는 이유는 무엇입니까?

Chrome에서 이미지가 흐리거나 움직임이 발생하는 CSS 전환 효과

문제:

다음과 같은 CSS 전환 효과를 적용할 때 분할을 이동하면 분할의 이미지가 흐릿해지거나 약간 위치가 바뀌는 등의 바람직하지 않은 동작이 Chrome에서 나타납니다. 이 문제는 페이지에 스크롤 막대가 있는 경우에만 지속됩니다.

해결책:

이러한 효과를 방지하려면 다음 CSS를 구현하세요. 변경 사항:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

설명:

• -webkit-backface-visibility: Hidden: 부서 뒷면 렌더링을 비활성화합니다. 간단한 번역에는 필요하지 않으며 변환.
• -webkit-transform:translateZ(0) scale(1, 1); 나누기의 Z축 변환을 0으로 설정하고 다시 원래 크기로 크기를 조정하여 이미지는 그대로 유지됩니다.

2020 업데이트:

• 흐릿한 이미지의 경우 다른 답변에서 제안한 대로 이미지 렌더링 CSS 속성을 사용하는 것이 좋습니다.
• 접근성 및 SEO를 위해 배경 이미지를 img 태그로 바꾸는 것이 좋습니다. 객체 맞춤 CSS 속성을 사용합니다.

위 내용은 내 CSS 전환으로 인해 Chrome에서 이미지가 흐릿해지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!