Css 绝对宽度小于div时背景图像隐藏在chrome中

我有一个chrome背景图像，应该是动态的。这是我正在制作的图像地图的一部分。然而，在chrome中，当图像的绝对大小大于悬停时父div的绝对大小时，背景图像就会消失

你可以在这把小提琴上看到这种行为。编辑：将fiddle更改为简化版注意：这是一个真实应用程序的片段，删除了一些功能，希望能使问题更容易识别。在真正的应用程序中必须只有一个图像，因此具有多个图像标签的解决方案（然后在悬停时显示/隐藏）不能在此处使用。如果缩小输出的宽度，使图像的结尾刚好离开页面，并将鼠标悬停在ff中的图像上，您将看到应用了悬停图像。在chrome中，你会看到div上的背景图像消失了

受影响的浏览器

铬

歌剧院

未受影响的浏览器

铬在Lubuntu 14.04上运行

火狐

Internet Explorer 11

Safari仅通过虚拟机进行测试

fiddle中的基本CSS看起来我知道我可以压缩到background属性中，但它让我更容易在chromedev工具中使用fiddle

#htmlmap_1 {
    background-image: url(http://hm25.dev.blox42.com/images/htmlmaps/branch.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 50% 0%;
    background-size: contain;
}

问题截图

预处理图像

Posthover-Chrome-附加到div的背景图像已消失-仅显示主图像

Posthover-FF图像已按预期调整大小，图像覆盖背景图像

编辑：

---

有一点不同的是删除背景重复：no repeat属性。这就给出了图像缩小的预期结果，就像在ff中一样。然而，很明显，我不希望图像重复，所以这不是一个可行的解决方案。希望它能帮助某人解决问题

我无法重现你的问题。请插入一些截图好吗？@Héctor添加了一些截图来帮助您！谢谢你的关注！你需要在js中使用map吗？仅CSS如何？映射对于我的特定用例是必需的。然而，即使在CSS中，我也可以在@dippas中复制它，并且可能应该提到上面的示例，在没有map元素的情况下，我可以复制它