為什麼我的圖像在 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;
}

雖然此問題可能與轉換有關，更有效的解決方案是將以下內容應用於利用不透明度的懸停元素：

-webkit-backface-visibility: hidden;

背面可見性影響變換，並且僅為WebKit 指定此屬性就足夠了，因為它是WebKit 特定的問題。可能存在其他供應商前綴。

請參閱 http://css-tricks.com/almanac/properties/b/backface-visibility/ 以了解更多資訊。

以上是為什麼我的圖像在 Chrome 中懸停時會移動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！