CSS背景图像尺寸过渡 [英] CSS Background image size transition

问题描述

我工作的一个简单的标记与调整一个div的背景IMG。
看到小提琴：

I am working on a simple markup with resizing a div's background img. See the fiddle:

http://jsfiddle.net/zeYZL/

我需要这一个简单的CSS过渡动画。
我试着这样做：

I need this to be animated with a simple CSS transition. and I tried doing this:

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

这是如何解决任何提示？

Any tips on how to fix it?

问候，克里斯

推荐答案

的jsfiddle

您需要把外面的悬停太<$​​ C $ C>背景属性，因此它知道什么返回当不上徘徊。

You need to put background properties outside the hover too, so it knows what to return to when not on hover.

例如

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

如果你想让它在鼠标悬停过渡，当你把鼠标了，你把过渡上 .tile ，而不是 .tile

和：悬停

And if you want it to transition on mouseover and when you take the mouse off, you put the transition on .tile and not .tile:hover

的jsfiddle

边注

您应该避免使用内嵌样式，你可以使用样式表。
放在您的背景图像.tile 而不是使用风格属性。

You should avoid using inline styles where you can use a stylesheet. Put your background image in .tile rather than using the style attribute.

完整的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;
}

这篇关于CSS背景图像尺寸过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！