悬停时图像移动：解决 Chrome 中的不透明度问题

用户报告了悬停时图像稍微向右移动的问题，但仅限于 Chrome。此问题是由于使用不透明度来控制图像的透明度而引起的。

检查 CSS

为了调查该问题，我们检查提供的 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 属性。此属性会影响元素背面在变换时的渲染方式。在这种情况下，它解决了 Chrome 中因不透明度​​更改而导致的意外移动。

将以下属性应用于悬停状态：

-webkit-backface-visibility: hidden;

其他注意事项

-webkit-backface-visibility 属性特定于 WebKit 浏览器，因此您可能需要其他引擎的供应商前缀。有关更全面的信息，请参阅 CSS-Tricks 文档。