Question

我在互联网上搜索并发现：How to display image over image on hover with css 我在使用Chrome和Firefox的jsfiddle和博客文章中尝试了this image的代码它们都没有显示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。但是您已经定义了width＆amp; height元素的a:before到50px，因此背景图片的大小也应为50px。

只需使用：

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

请看下面的代码段：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

希望这有帮助！

'悬停图像显示图像'CSS无法正常工作

1 个答案: