图像没有通过CSS背景属性出现

-2

我有一个图像不会改变悬停，我不明白为什么。图像没有通过CSS背景属性出现

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

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

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

和图像从未上悬停改变。谁能告诉我为什么？

来源

2016-12-29 user6680

您需要为'悬停'事件添加css代码 –

背景图片和图片不是同一张图片。

当您更改背景图片时，您只需更改背后的图片即可。

如果并且只有在图像是半透明的时候才能看到变化。

.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>

来源

2016-12-29 22:59:10 Quentin

只需阅读@ Johny的答案，并同意我们无法通过CSS更改“”标签的图像。有趣的是，我看到我们真的可以！ – Siavas

您不能替换图像插入为IMG标签与CSS背景属性。浏览器不会允许你这样做。

要么将初始背景设置为A元素，并使用:hover伪类更改它，或者使用javascript附加onMouseOver事件并更新src属性。

这两种方式仍然是完美的（或者我的描述太简单了），但这个问题是非常基本的，它几乎在每个教程/ HTML & CSS的介绍中都有描述。

来源

2016-12-29 22:59:31 Johny

图像没有通过CSS背景属性出现

回答

相关问题