Question

我有<div> background-image和height 100px。我想这样做，以便在悬停时，div会从100px转换为300px。对于这两个属性，背景图像将转移到1s以上的位置。

我的背景图像工作正常，当我将转换应用到height的{{1}}时，它可以工作，但背景图像停止工作;相反，它已经处于最终位置，没有过渡。

我可以实现我想要的目标吗？

Answer 1

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等更改了样式，请更改每个样式过渡。”您只需指定是否只需要将一个属性设置为动画

同时转换和转换？

1 个答案: