圖像沒有通過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背景屬性出現

回答

相關問題