Question

我正在制作一个简单的标记，调整div的背景img。看小提琴：

我需要使用简单的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之外，因此它知道在不悬停时要返回的内容。

e.g。

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

Answer 2

你有内联CSS应该被提取到初始CSS状态。

JSfiddle

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

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

}

CSS背景图像大小过渡

2 个答案: