'懸停圖像顯示圖像'CSS無法正常工作

我在互聯網上搜索，發現這個：How to display image over image on hover with css。
我在jsfiddle和博客文章中使用Chrome和Firefox嘗試了this image的代碼。
沒有一個顯示結果，如this image。
什麼是不正確的我的代碼？謝謝。'懸停圖像顯示圖像'CSS無法正常工作

a { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
a:hover:before { 
 
    content: ''; 
 
    display: block; 
 
    background-image:url('http://i.imgur.com/fGAbTOj.png'); 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>

來源

2016-11-27 Louis55

使用background-size財產，因爲你是設置background-image屬性a:before元素和背景圖像的大小爲256x256。但是您已將a:before元素的width & height定義爲50px，因此背景圖片的大小也應爲50px。

只需使用：

a { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
a:hover:before { 
 
    content: ''; 
 
    display: block; 
 
    background-image:url('http://i.imgur.com/fGAbTOj.png'); 
 
    width: 50px; 
 
    height: 50px; 
 
    background-size: 50px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<a href="#"><img src="http://cdn.akamai.steamstatic.com/steam/apps/271590/ss_80b965d66b13d6eb5e1468151a371e12fe159663.600x338.jpg" /></a>

希望這有助於：

a:hover:before { 
    background-size: 50px; /* as you have 'width' and 'height' defined as 50px each */ 
}

在下面的代碼片段看看吧！

來源

2016-11-27 05:36:02

謝謝，它只適用於'background-size'。但我仍然有一個問題，即爲什麼該圖像的代碼仍然工作，即使'background-size'丟失。 – Louis55

@ ll55我的榮幸！但我仍然不明白，當'background-size'丟失的時候代碼是在工作，也許我沒有得到你的問題。 –

「https：//i.stack.imgur.com/zOjXI.png」中的代碼可以在懸停圖像時顯示圖像，即使是「background-size」丟失。 – Louis55

'懸停圖像顯示圖像'CSS無法正常工作

回答

相關問題