悬停时的不透明度变化会导致图像偏移或失真

Posted

技术标签:

【中文标题】悬停时的不透明度变化会导致图像偏移或失真【英文标题】:Opacity change with hover creates an image shift or distortion 【发布时间】:2014-03-10 04:04:40 【问题描述】:

我有一个jsfiddle here,它表明使用a:hover,更改不透明度会改变(或扭曲)图像。

这在 Firefox 中可见。

有人可以解释可能发生的情况以及如何防止图像发生变化吗?提前致谢。

【问题讨论】:

【参考方案1】:

我在this so post找到了答案。

对我来说,解决方案是在 img 上使用以下内容

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);
-webkit-backface-visibility: hidden;

【讨论】:

以上是关于悬停时的不透明度变化会导致图像偏移或失真的主要内容,如果未能解决你的问题,请参考以下文章