CSS 背景图片尺寸过渡效果

Question

我正在处理一个简单的标记，用于调整div的背景图像大小。请参见下面的fiddle：

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/）

有什么修复方法吗？

问候，Chris

- Chris Holstein

---

由于某些原因，stackoverflow不允许我向大家问好。 - Chris Holstein

Answer 1

JSFiddle

你需要在:hover之外设置background属性，这样当鼠标不在悬停状态时，它就知道要返回到什么样的背景。

例如：

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

- Albzi

---

@ChrisHolstein 没问题！很高兴能帮到你！ - Albzi

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;

}

- Paulie_D