本文介绍了图像在悬停时移动 - 铬不透明度问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我的页面似乎有问题:http://www.lonewulf.eu

将鼠标悬停在缩略图上时,图像会向右移动一点,并且仅在 Chrome 上发生.

When hovering over the thumbnails the image moves a bit on the right, and it only happens on Chrome.

我的 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;
}

推荐答案

另一个解决方案是使用

Another solution would be to use

-webkit-backface-visibility: hidden;

在具有不透明度的悬停元素上.背面可见性与 transform 相关,因此 @Beskow 与它有关.由于它是 webkit 特定的问题,您只需要指定 webkit 的背面可见性.还有其他供应商前缀.

on the hover element that has the opacity.Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

参见 http://css-tricks.com/almanac/properties/b/backface-visibility/ 了解更多信息.

See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

这篇关于图像在悬停时移动 - 铬不透明度问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

07-31 14:41