Css 将背景位置与悬停一起使用时出现问题

我正在尝试重新创建tumblr添加到他们新发布图标上的“反弹”

我一直在寻找如何使用

背景位置

来创建反弹，但到目前为止没有任何运气

这里的其他问题在使用

background

时遇到问题，然后试图指定

背景位置

，但我根本没有使用

background

我不想在这上面花太多时间，但现在我很好奇

HTML

发件人：

background position CSS属性设置相对于每个已定义背景图像的背景原点定义的背景位置层的初始位置

如果您查看HTML（使用开发工具，如Google Chrome的开发工具），您将看到Tumblr实际使用，然后使用

background position

属性使用CSS3转换向上/向下移动图标

background position

属性在您提供的代码中没有任何作用，因为没有

background image

属性集

---

如果不想使用精灵/图像，只需使用CSS3的

transform

属性即可创建“反弹”效果。我已经创建了一个JSFIDLE来演示这个想法：

我知道这并没有明确回答您的问题，但是如果您希望重新创建我使用CSS3

transform

（特别是

translateY

函数）属性创建的类似效果，使用

转换

创建“反弹”。JSFIDLE：啊，这更有意义。非常感谢！

<div id="container">
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
 <div class="block blue">
  <div class="inblock light-green"></div>
 </div>
 <div class="block green">
  <div class="inblock orange"></div>
 </div>
 <div class="block yellow">
  <div class="inblock light-blue"></div>
 </div>
</div>

#container {
  width:80%;
  height: 200px;
  padding-left:5em;
  background-color: #95A5A6;
}

.block {
  margin: 2em;
  height: 130px;
  width: 130px;
  float:left;
  border-radius:10px;
}

.block:hover > .inblock{
  background-color:#E74C3C;
  background-position: top;

}

.inblock {
  height: 80px;
  width: 80px;
  background-color:blue;
  margin: 1.5em;
}

.light-blue {
  background-color:#2980B9

}

.blue {
  background-color:#2C3E50;
}

.green {
  background-color:#27AE60;
}

.yellow {
  background-color:#F1C40F;
}

.orange {
  background-color:#E67E22;
}

.light-green {
  background-color:#2ECC71;
}