Question

我的图像在悬停时没有变化，我无法弄清楚原因。

<a href="#"><img src="images/image.png" alt="image" class="portImage2"></a>

这显示图像没有问题。在我的CSS中我有

.portImage2:hover{
    background-image: url(http://placekitten.com/g/263/167);
}

并且图片在悬停时不会改变。谁能告诉我为什么？

Answer 1

背景图像和图像不是同一图像。

更改背景图片时，只需更改背后图像。

当且仅当图像是半透明的时，您才能看到变化。

.portImage2:hover{
    background-image: url(http://placekitten.com/g/263/167);
}

<a href="#"><img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2"></a>

如果您想更改图片本身，则需要更改（内容）和不背景。

.portImage2:hover{
    content: url(http://placekitten.com/g/263/167);
}

<a href="#"><img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2"></a>

Answer 2

您无法将插入为IMG标记的图像替换为CSS背景属性。浏览器不允许你这样做。

在A元素上设置初始背景并使用:hover伪类更改它，或使用javascript附加onMouseOver事件并动态更新src属性。

这两种方式仍然是机器人完美（或者我的描述过于简化），但这个问题非常基础，几乎每个教程/ HTML＆amp; CSS。

图片无法通过css背景属性显示

2 个答案: