html - “悬停图像显示图像”CSS 无法正常工作

Question

我在 Internet 上搜索并找到了这个:How to display image over image on hover with css .
我尝试了 this image 的代码在 jsfiddle 和博客文章中使用 Chrome 和 Firefox。
他们都没有显示像 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>

希望这对您有所帮助!