我有一个与<div>
一个background-image
和一个height
。100px
我想让它在悬停时, div 将从 转换100px
为300px
。并且背景图像将过渡到1s
两个属性的位置。
我的背景图像工作正常,当我将转换应用于 时height
,<div>
它可以工作,但背景图像停止工作;相反,它已经处于最终位置,没有过渡。
我能实现我想要做的事情吗?
我有一个与<div>
一个background-image
和一个height
。100px
我想让它在悬停时, div 将从 转换100px
为300px
。并且背景图像将过渡到1s
两个属性的位置。
我的背景图像工作正常,当我将转换应用于 时height
,<div>
它可以工作,但背景图像停止工作;相反,它已经处于最终位置,没有过渡。
我能实现我想要做的事情吗?
这是我想出的答案http://jsfiddle.net/m7hHg/
div {
background-image:url("http://www.whitegadget.com/attachments/pc-wallpapers/130360d1359002342-background-image-background-image-image-1024x768.jpg");/*Insert your image here*/
width:100px;
height:100px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
-ms-transition:all 1s;
transition:all 1s;
}
div:hover {
background-position:-350px 0;
width:300px;
height:300px;
}
您的代码的问题是您只指定了过渡的背景位置。通过使用all
而不是background-position
,您告诉 CSS 说“如果通过 , 等更改样式,则hover
使用active
过渡更改每个样式。” 您只需指定是否只希望对一个属性进行动画处理