CSS背景图像大小过渡

Question

我正在研究一个简单的标记,调整div的背景img.看小提琴:

http://jsfiddle.net/zeYZL/

我需要使用简单的CSS过渡动画.我试着这样做:

#tile:hover {
    background-size:550px 550px;
    background-position:-50px -50px;
    transition:all 0.5s ease;
    -webkit-transition:all 0.5s ease;
    -o-transition:all 0.5s ease;
    -moz-transition:all 0.5s ease;

}

但随后背景图像会在悬停时剪辑.(见http://jsfiddle.net/5Hm9u/)

有关如何解决它的任何提示？

问候,克里斯

Answer 1

的jsfiddle

您还需要将background属性放在外面hover,因此它知道在不悬停时要返回的内容.

例如

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-position:0px 0px;
}

如果你希望它在鼠标悬停时转换,当你关闭鼠标时,你可以进行转换,.tile而不是.tile:hover

的jsfiddle

边注

您应该避免使用可以使用样式表的内联样式.放置背景图像.tile而不是使用style属性.

完整的CSS:

.tile{
  float:left;
  margin:1px;
  width:450px;
  height:450px;
  overflow:hidden;
  background-size:450px 450px;
  background-image:url(http://www.placehold.it/450x450);
  background-position:0px 0px;
  transition:all 0.5s ;
  -webkit-transition:all 0.5s ;
  -o-transition:all 0.5s ;
  -moz-transition:all 0.5s ;
}

.tile:hover {
  background-size:550px 550px;
  background-position:-50px -50px;
}