悬停时不透明度发生变化时 Google Chrome 中的背景偏移

Posted 2023-03-06

【中文标题】悬停时不透明度发生变化时 Google Chrome 中的背景偏移

【英文标题】：Background shift in Google Chrome when opacity changes on hover

【发布时间】：2012-05-05 02:10:51

【问题描述】：

我用 Jquery 设置了一个悬停效果，它改变了悬停元素的不透明度。它在所有最近的浏览器中都能正常工作，除了 Chrome，它会改变 body 元素的背景。

这是链接：http://wrong.ro/tataia/

我的工作环境如下：Google Chrome v18.0.1025.162 / Windows 7 x64。

有什么解决方法吗？提前致谢！

【问题讨论】：

它似乎在 Chrome 中工作。您能否更具体地说明导致问题的具体原因以及所涉及的代码？由于您是新来的，我应该告诉您，在 *** 上，人们很少回答您刚才说的问题，这是我的页面 - 它不起作用。相反，您需要准确描述造成问题的步骤，准确描述问题所在，然后在您的帖子中包含相关代码和 html。

如果鼠标悬停在 chrome 中的“#4 februarie 2012”上，我可以看到 bkgrd 图像的一些变化

在 GC-18.0.1025.165/MacO 上一切正常

@rt2800 - 你必须仔细观察，因为所有文本链接在悬停时都会改变背景。

我解决了我的问题 - 在下面回答

【参考方案1】：

我经历了非常接近此的事情，在我的情况下，更改悬停时的不透明度会导致前景图像元素摆动。看起来特定原因与使用转换（我正在使用）有关。修复很简单 - 在我添加的相关 img 元素上：

-webkit-backface-visibility: hidden;

没有更多的摆动。我不熟悉它的实际作用，但它没有任何奇怪的副作用并解决了问题。

我还看到了一个我没有尝试过的替代解决方案 - 显然其他人已经经历过这个并使用旋转修复它：

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
transform: rotate(0);

【参考方案2】：

我终于可以在 Chrome 中看到问题了。它非常微妙，因此除非您确切地知道您在寻找什么，否则很容易错过。

我仍在处理其余问题，但是当我将鼠标悬停在中下部的“stiati ca”徽标上时，我可以看到背景在图像左侧稍微移动了一点。

问题似乎与您的 CSS 的 background-size 部分有关。如果我删除 background-size 行，问题就完全消失了。我并不是说这是问题的真正原因，但这是第一个线索。我在调查的这一点上的猜测（答案稍后会更多）是悬停中的某些东西导致文档大小发生变化，从而导致背景重新缩放并因此发生变化：

body 
    background: black url('../img/bck.jpg') left top fixed no-repeat;
    moz-background-size: cover;
    background-size: cover;
    -ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale')";
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bck.jpg', sizingMethod='scale');

进一步追求这一点，我发现如果我从这个 CSS 块中注释掉 text-indent 行：

a#stiati_ca
    display: block; width: 124px; height: 124px;
    xtext-indent: -9999em;
    background: url('../img/stiati_ca.png') no-repeat;
    margin: 88px auto 0;

然后，将鼠标悬停在徽标上时，问题就完全消失了。当然，您的链接中有一些文本显示我猜您不想看到，但您可以修复 HTML 以不同的方式工作。我建议使用其中包含固定大小 div 的链接（链接中没有文本），然后在 div 上而不是在链接本身上设置背景图像。无论如何，这是一种更安全的跨浏览器方式，您不需要文本缩进行，并且徽标图像的背景移动问题应该消失。如果您确实需要链接中的文本但不希望它显示，则将其放入跨度并使用display: none 使跨度不可见。无论哪种方式，您都不应在<a> 上设置背景图像，而应在链接内具有适当大小的元素上设置背景图像。这应该会更好。

我还没有弄清楚为什么前四张图片会出现同样的问题。如果我弄清楚了，我会添加到我的帖子中。

【讨论】：

非常感谢，这是一个非常有说服力的答案，感谢您花时间解决这个问题。但是，我真的需要链接中的文字。你能给我一些关于你的陈述的参考“我建议使用一个带有固定大小 div 的链接（链接中没有文本），然后在 div 上而不是在链接本身上设置背景图像。这是一个无论如何，更安全的跨浏览器方式做事”？

为什么需要链接中的文字？它在页面上不可见。

Web 可访问性、电子阅读器、RSS、SEO 将是其中一些原因。