Question

我想把我的背景无限移动，为此我编码：

    html, body {
    margin : 0;
    padding: 0;
    width: 100%;
    height: 100%;
    cursor: url('../assets/img/ship.cur'), auto;
    background-color : #000;
}

#background {
    position : absolute;
    background-image: url('../assets/img/littlestars.png');
    height : 720px;
    width : 1280px;
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" href="../style/home.css">
  <script language=javascript src="../js/navigate.js"> </script>
  <script language=javascript src="../js/background.js"> </script>
</head>
<body onLoad="onLoad(); loadBG();">
  <div id="background"> </div>

</body>
</html>

function loadBG() {
    window.setInterval(moveStars, 100);
}

function moveStars() {
    var bg = document.getElementById("background");
     bg.style.backgroundPosition += 10;
}

但它不起作用......如果我不能显示backgroundPosition。

一些想法？这是创建javascript动画的好方法吗？ THX。

Answer 1

backgroundPosition是一个属性，以单位表示回溯的x，y位置，而不是单个数字。

您需要执行以下操作：

var posx = 0;
function moveStars() {
    var bg = document.getElementById("background");
    posx+=10;
    bg.style.backgroundPosition = posx+"px 0";
}

Javascript / Css：无法使用positionBackground移动背景

1 个答案: