Fatal编程技术网
  • javascript/
  • Javascript CSS背景重复：无重复；还在重复

Javascript CSS背景重复：无重复；还在重复

javascript jquery html css

Javascript CSS背景重复：无重复；还在重复,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有 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> <bod

我有

    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>


胡特
var imgCount=3；
var dir='img/'；
var randomCount=Math.round（Math.random（）*（imgCount-1））+1；
var images=新数组（）；
图片[1]=“1.png”，
图片[2]=“2.png”，
图片[3]=“3.png”，
document.body.style.background=“url（“+dir+images[randomCount]+”）；

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

感谢您的帮助

添加此行

document.body.style.backgroundRepeat="no-repeat";
或者以另一种方式替换现有线路

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

胡特
var imgCount=3；
var dir='img/'；
var randomCount=Math.round（Math.random（）*（imgCount-1））+1；
var images=新数组（）；
图片[1]=“1.png”，
图片[2]=“2.png”，
图片[3]=“3.png”，
document.body.style.background=“url（“+dir+images[randomCount]+”）；
document.body.style.backgroundRepeat=“无重复”；
CSS不需要定义

，因为您可以用
document.body.style.background
覆盖整个背景样式，包括repeat属性

使用
document.body.style.backgroundImage
对其进行更改

之所以发生这种情况，是因为
背景
是一个复合属性，它包括
背景颜色
，
背景图像
，
背景重复
，
背景位置
，
背景附件
。这意味着，当您单独设置
background
而不指定
background repeat
时，您只需覆盖先前定义的规则，它就会返回默认值，即
repeat
。要解决此问题，您应明确提供：

document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";
或设置安装的背景图像

document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";
它重复的原因是您正在设置整个背景属性。这将覆盖任何细节，例如
后台重复
。试试这句话：

document.body.style.background-image = "url(" + dir + images[randomCount] + ")"
而不是您所拥有的。

+1用于解释属性被覆盖的原因。 
document.body.style.background-image = "url(" + dir + images[randomCount] + ")"