JSFiddle

Question

我有......

    html, body {
    background-size: contain;
    background-repeat: no-repeat;
    }

作为我的CSS和我的HTML

<html>
<head> 
<title>Wut</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div id="page">
    </div>
   <script type="text/javascript">
        var imgCount = 3;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array();
            images[1] = "1.png",
            images[2] = "2.png",
            images[3] = "3.png",
         document.body.style.background = "url(" + dir + images[randomCount] + ")";
    </script>
</body>

出于某种原因，由JS随机选择的背景滚动，我不想/需要它。另外作为旁注：我设法让它在某一点停止滚动但是当我添加背景颜色时，一半的背景图像被掩盖了，你无法看到背景图像本身。

感谢您的帮助

Answer 1

之所以发生这种情况，是因为background是一个复合属性，其中包含background-color，background-image，background-repeat，background-position，background-attachment 。这意味着当您单独设置background而未指定background-repeat时，您只需覆盖以前定义的规则，它就会回退到默认值repeat。要修复它，你应该明确地提供它：

document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";

或设置background-image insted：

document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";

Answer 2

添加此行

document.body.style.backgroundRepeat="no-repeat";

或现有行的另一种方式替换此

document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";

HTML

<html>
  <head> 
   <title>Wut</title>
   <link href="style.css" rel="stylesheet" type="text/css">
  </head>

<body>
    <div id="page">
    </div>
   <script type="text/javascript">
        var imgCount = 3;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array();
            images[1] = "1.png",
            images[2] = "2.png",
            images[3] = "3.png",
         document.body.style.background = "url(" + dir + images[randomCount] + ")";
         document.body.style.backgroundRepeat="no-repeat";
    </script>
</body>

CSS无需定义

Answer 3

因为您使用document.body.style.background覆盖整个背景样式，包括重复属性。

使用document.body.style.backgroundImage进行更改。

JSFiddle

Answer 4

重复的原因是您正在设置整个背景属性。这会覆盖任何细节，例如background-repeat。试试这一行：

document.body.style.background-image = "url(" + dir + images[randomCount] + ")"

而不是你拥有的。

CSS background-repeat：no-repeat;还在重复

4 个答案:

HTML

JSFiddle