1

最近は CSS3 アニメーションにハマってしまったので、今はそれで遊んでいます。しかし、残念ながら、bg 画像を下に配置する際に問題があります。

これは私が取り組んでいるコードです:

  body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333333;
  background: #A9D0F5 url("../image/bg-clouds.png") repeat-x fixed center bottom;
  animation: animatedBackground 40s linear infinite;
  -ms-animation: animatedBackground 40s linear infinite;
  -moz-animation: animatedBackground 40s linear infinite;
  -webkit-animation: animatedBackground 40s linear infinite;
  /*background-color: #008bcf;*/    
}

@-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-webkit-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-ms-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }
    @-moz-keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }

ここで何が問題になっているようですか？何か案は？ありがとう。

これは jsfiddle です: http://jsfiddle.net/Rex2E/

4

2 に答える 2

1

フィドルを追加してくれてありがとう。私はそれをいじって、背景を一番下に配置しました。

上または左に話している位置の値として 0 を設定している場合 ... 0 0 は左上です。

このフィドルをチェックしてください

body {
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 14px;
   line-height: 20px;
   color: #333333;
   background: #A9D0F5 url("http://i43.tinypic.com/fcmjv4.png") repeat-x fixed center bottom;
   animation: animatedBackground 40s linear infinite;
   -ms-animation: animatedBackground 40s linear infinite;
   -moz-animation: animatedBackground 40s linear infinite;
   -webkit-animation: animatedBackground 40s linear infinite;
}
@-keyframes animatedBackground {
  from { background-position: center bottom; }
  to { background-position: 100% bottom; }
}
@-webkit-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}
@-ms-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
    from { background-position: center bottom; }
    to { background-position: 100% bottom; }
}

PC の Chrome で動作しています。動作するかどうか教えてください。乾杯。

于 2013-07-24T12:41:04.423 に答える
0

バックグラウンドアニメーションを内部に設定divし、これを確認する必要があります:

ページ下部の固定フッターと本文の背景画像

あなたに役立つかもしれないいくつかの答えがあります

于 2013-07-24T12:35:05.020 に答える