0

そこで私は最近、CSS3 の非常にエキサイティングなアニメーション機能を発見し、Web サイトの背景にアニメーションを適用しました。

http://ryanhammond.us/

私の問題は、読み込み時にブラウザ ウィンドウ内に表示されるページの部分にのみアニメーションが適用されることです。上記のリンクにアクセスして下にスクロールすると、ウェブサイトの上部にある背景画像がアニメーション化されていることがわかりますが、ページを下にスクロールするとアニメーション化されません...

背景アニメーションがページ全体に適用されるように、これを回避する方法を知っている人はいますか?

私のCSSコードの関連部分は次のとおりです。

body
{
background-image:url('images/patterntest2.jpg');
background-repeat:repeat;
-webkit-animation:bgscroll 20s infinite linear;
   -moz-animation:bgscroll 20s infinite linear;
    -ms-animation:bgscroll 20s infinite linear;
     -o-animation:bgscroll 20s infinite linear;
        animation:bgscroll 20s infinite linear;
}

/*////////////////////////////////////////////////
--------------------------------------------------
*   Animations
-------------------------------------------------- 
////////////////////////////////////////////////*/

@-webkit-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-moz-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-ms-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@-o-keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}

@keyframes bgscroll {
from {background-position:0 0;}
to {background-position:0 -520px;}
}
4

1 に答える 1

0

Chromeを使用していますが、私にとっても問題なく機能しています。しかし、問題がある場合は、設定を試すことができると思います

background-size: cover;

おそらくそれで問題が解決するでしょう。

于 2013-03-22T10:11:56.827 に答える