当鼠标位于下拉菜单上时，Css封面图像会调整大小

Question

我的网站有问题，我创建了一个css菜单，它是某些元素的下拉菜单。我使用图像作为完整的封面。当我将鼠标放在下拉菜单的元素上时，封面会改变位置。我的测试网站是http://unibenefits.gr/test2/tripoli。

Answer 1

当您将background-image设置为cover时，它会填充您指定给它的整个元素（通常是HTML或Body）。如果元素的大小改变，这将改变 - 例如，如果您调整浏览器窗口的大小，background-image将调整大小以适应它。

下拉菜单中的某些内容会导致您的网站设计水平溢出（即某些翻转时设计稍有变化，因此设计比浏览器窗口略宽）。反过来，这会创建一个水平滚动条。水平滚动条占据了浏览器窗口的空间，effectivley调整了它的大小。这就是为什么你的cover背景图片正在调整大小 - 它实际上并没有改变位置，尽管它们看起来很相似。

如果您可以确定菜单中的内容导致水平滚动条出现，您就可以解决问题。