Question

问题：我的主页（PNG格式）的徽标在移动光标时在firefox（chrome工作正常）中以奇怪的方式移动。它从左到右依次为5-10像素。

在PNG图像下是具有背景附件的身体线性渐变背景：滚动;

注意：如果正文背景线性渐变具有固定的附件并且实际上是线性渐变，则图像悬停工作正常。在正常背景下，它甚至也不起作用，如果附件是固定的。

我想使用线性渐变和背景附件：滚动;

评论中的两个示例仅起作用，因为它们具有后台附件：fixed，正如我之前在css样式中列出的那样。只是为了帮助找出什么是错的，所以我更新了我的帖子，并修复了附件。

如果您想查看问题，请使用 PNG或GIF作为图片，而不是占位符。

最后一个问题：有没有办法让PNG在不透明度的过渡中悬停，同时为背景附件的身体提供线性渐变背景：滚动;

PS。链接的背面可见性：隐藏; 或/和图像不是解决方案！

最终：经过数小时和数小时后，我在评论部分的下方找到了解决方案here。如果您遇到同样的问题，则必须使用 transform：translateZ（0）; 来处理有问题的图像。

body {
  background: linear-gradient(#edf6fa, #fbfbe9);
  background-attachment: fixed; /*without it, the image whobbles*/
  background-attachment: scroll; /*but this is what i need*/
}
#toplogoimg {
  float: left;
}
#toplogoimg a {
  position: relative;
}
#toplogoimg img{
  opacity: 1;
  transition: opacity 0.3s ease-in;
}
#toplogoimg img:hover{
  opacity: 0.8;
  transition: opacity 0.2s ease-out; /*transition is the bad guy, but not the main problem, because as I said with background-attachment: fixed; for the body it works fine, but only if it is a linear-gradient background.*/
}

<div id="toplogoimg">
  <a href="index.html">
    <img src="http://placehold.it/180x180" />
    <!--The image src should be a PNG or GIF file. JPG works fine, but i need transparency.-->
  </a>
</div>

GIF和PNG图像在Firefox中随Hover移动

0 个答案: