Chrome에서 마우스를 올리면 이미지가 움직이는 이유는 무엇이며 어떻게 해결할 수 있나요?

마우스를 올리면 이미지가 이동함 - Chrome의 CSS 불투명도 문제

아래 링크된 웹페이지의 썸네일 위로 마우스를 가져가면 이미지가 오른쪽으로 약간 이동하는 문제 Chrome에서만 관찰됩니다.

http://www.lonewulf.eu

다음 CSS가 사용됩니다.

.img{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter:alpha(opacity=50);
    -moz-opacity: 0.5; 
    opacity: 0.5;
    -khtml-opacity: 0.5;
    display:block;
    border:1px solid #121212;
}
.img:hover{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100);
    -moz-opacity: 1; 
    opacity: 1;
    -khtml-opacity: 1;  
    display:block;
}

이 문제는 변환과 관련이 있을 수 있지만, 더 효과적인 해결책은 불투명도를 활용하는 hover 요소에 다음을 적용하는 것입니다.

-webkit-backface-visibility: hidden;

Backface-visibility는 변환에 영향을 미치며, WebKit에 특정한 문제이므로 이 속성을 WebKit에만 지정하는 것으로 충분합니다. 다른 공급업체 접두사가 존재할 수 있습니다.

자세한 내용은 http://css-tricks.com/almanac/properties/b/backface-visibility/를 참조하세요.

위 내용은 Chrome에서 마우스를 올리면 이미지가 움직이는 이유는 무엇이며 어떻게 해결할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!