'Hover image display image' CSS 工作不正常

Question

我在网上搜索了一下，发现了这个：How to display image over image on hover with css。
我使用 Chrome 和 Firefox 在 jsfiddle 和博客文章中尝试了 this image 的代码。
None 显示的结果类似于 this image。
我的代码中有什么不正确的地方？谢谢。

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>

Answer 1

使用 background-size 属性，因为您将 background-image 属性设置为 a:before 元素并且背景图像的大小为 256x256.但是你把a:before元素的width&height定义为50px，所以背景图片的大小也应该是50px.

只需使用：

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

看看下面的代码片段：

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>

希望对您有所帮助！

'Hover image display image' CSS 工作不正常

'Hover image display image' CSS is not working properly

html

css

image

hover

display