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:
我需要这一个简单的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?
问候,克里斯
推荐答案
您需要把外面的悬停
太<$ 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
边注
您应该避免使用内嵌样式,你可以使用样式表。
放在您的背景图像.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屋!