0

<div>我想在元素内放置一个可以上下“滚动”的大图像。问题是图像的大小被拉伸到#animation-windiv 元素的大小。图像的高度大于 300 像素，这就是我想上下滚动它的原因，以便它可以在 300 像素的 div 元素中以原始大小出现。可以做到吗？非常感谢。

这是html：

<div id="animation-win">
 <div class="anim">
 </div>
</div>

这是我的 CSS：

#animation-win {

    background:#000;
    position: relative;
    width:900px;
    height:300px;
}

.anim
{

     background-image:url('../images/picture1.jpg');
     background-size: 100% 100%;
     position:absolute;
     animation:cssanim 5s infinite;
     animation-direction:alternate;

     /* Safari and Chrome */
     -webkit-animation:cssanim 5s infinite;
     -webkit-animation-direction:alternate;
}

@keyframes cssanim
{
     0%   {background:red; left:0px; top:0px;}
     100% {background:red; left:0px; top:0px;}
}

@-webkit-keyframes cssanim /* Safari and Chrome */
{
0%{
    background-image:url('../images/picture1.jpg'); 
    width:100%;
    height:100%;
    left:0px; 
    top:0px;
    background-size: 100% 100%;
    }
100% {
    background-image:url('../images/picture1.jpg');
    width:100%;
    height:100%;
    left:0px; 
    bottom:549px;
    background-size: 100% 100%;
    }
}
4

1 回答 1

2

300px 的 100% 是 300px。将实际高度设置为cssanim- 然后它不会拉伸（此处为 900 像素，如上所述）您可以让高度 300 像素在#animation-win.

0%{
    background-image:url('1.gif'); 
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    top:0px;
    background-size: 100% 100%;
    }
100% {
    background-image:url('1.gif');
    width:100%;
    height:900px; /* <---- */
    left:0px; 
    bottom:300px; /* <--- so the area not get entirely black in a long moment */
    background-size: 100% 100%;
    }
}

注意：使用1.gif哪个233 x 282px 进行测试，因此上面的图像也应该与您的图像一起有效。带有随机维基百科图像的jsfiddle http://jsfiddle.net/dLGBX/ 。

于 2013-09-30T15:07:22.390 回答