0

<div>要素内で上下に「スクロール」する大きな画像を配置したい。問題は、画像のサイズが#animation-windiv 要素のサイズに引き伸ばされることです。画像の高さが 300px を超えているため、300px の 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- その後、伸びません (ここでは上記のように 900px)。高さ 300px を in にすることができます#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 に答える