为什么图像在 Chrome 中悬停时向右移动，以及如何修复它？-css教程-PHP中文网

为什么图像在 Chrome 中悬停时向右移动，以及如何修复它？

Patricia Arquette

发布： 2024-10-27 03:24:03

原创

230 人浏览过

Why Do Images Shift Right on Hover in Chrome, and How to Fix It?

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

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

检查 CSS

为了调查该问题，我们检查提供的 CSS：

<code class="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;
}</code>

登录后复制

解决问题

另一种解决方案是在不透明的悬停元素上使用 -webkit-backface-visibility 属性。此属性会影响元素背面在变换时的渲染方式。在这种情况下，它解决了 Chrome 中不透明度更改导致的意外移动。

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

<code class="css">-webkit-backface-visibility: hidden;</code>

登录后复制

其他注意事项

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

以上是为什么图像在 Chrome 中悬停时向右移动，以及如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！