将 img 悬停在背景图像 css 上答案

【问题标题】：hover img over background-image css将 img 悬停在背景图像 css 上
【发布时间】：2013-07-22 14:27:25
【问题描述】：

我有一个像这样设置为背景的图像

.about {
    height: 351px;
    background-image:url("../images/about.png");
    background-position:center;
    background-repeat:no-repeat;
}

我正在尝试用户：悬停

.about:hover {
    background-image:url("../images/hover.png");
}

在顶部显示另一个图像。我希望原始图片仍然存在，因为悬停图像具有透明度。

这种方式替换图像，有没有办法不替换它而只是将鼠标悬停在原始图像上？

【问题讨论】：

标签： css hover background-image

【解决方案1】：

你需要一个掩码，或者你的.about 元素内的一个元素（或者绝对定位在它上面）。蒙版以悬停图像作为背景，但具有visibility:hidden。然后，当.about 元素处于悬停状态时，它会激活遮罩。 .about:hover .about-mask {visibility: visible;}。专业提示：使用visibility:hidden 而不是display:none 允许浏览器加载图像，即使它不可见，所以你不会有任何闪烁。

http://jsfiddle.net/nDHbD/

【讨论】：

两者的答案几乎相同，但对示例的额外赞誉，但也喜欢关于加载图像的额外知识。加倍努力！

【解决方案2】：

您可以在 .about 上面放置一个 div，然后让它在 :hover 上显示它的图像，这样，两个图像都会显示。更好的是，您可以为新 div 上的过渡设置动画，使其顺利进行。

【讨论】：

这可以工作，但如果悬停效果将用于多个图像怎么办？您必须为每个悬停 div 命名不同的名称，否则当您将鼠标悬停在一个上时它们都会显示？
不一定。 :hover 效果可能只是关于定位，（如：padding-top:350px），不同的图像作为标签放置在 div 中。这样，您可以为您的 :hover div 创建一个通用类并让它们显示不同的内容。
jsfiddle.net/SE6NY 这就是悬停div上不同内容的小提琴。 :)