[英]CSS background-repeat: no-repeat; still repeating
I have... 我有...
html, body {
background-size: contain;
background-repeat: no-repeat;
}
As my CSS and in my HTML I have 作为我的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>
For some reason the background which is randomly selected by the JS scrolls and i don't want/need it to. 由于某种原因,JS滚动选择的背景是随机的,我不希望/不需要。 Also as a side note: I managed to make it stop scrolling at one point but when i added background-color, half of the background image was covered up and you couldn't see the background image itself.
另请注意:我设法使其停止在某一点滚动,但是当我添加背景色时,背景图像的一半被遮盖了,您看不到背景图像本身。
Thanks for the help 谢谢您的帮助
The reason why it happens is because background
is a composite property which includes background-color
, background-image
, background-repeat
, background-position
, background-attachment
. 发生这种情况的原因是因为
background
是一个复合属性,包括background-color
, background-image
, background-repeat
, background-position
, background-attachment
。 It means that when you set background
alone without specifying background-repeat
you simply overwrite previously defined rule, it just falls back to default value which is repeat
. 这意味着当您单独设置
background
而未指定background-repeat
您只需覆盖先前定义的规则,它就会退回到默认值repeat
。 To fix it you should explicitly provide it: 要修复它,您应该明确提供它:
document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";
or set background-image
insted: 或设置
background-image
:
document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";
Add this line 添加此行
document.body.style.backgroundRepeat="no-repeat";
or another way existing line replace this one 或以其他方式替换现有的生产线
document.body.style.background = "url(" + dir + images[randomCount] + ") no-repeat";
<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 no need to define CSS无需定义
The reason it's repeating, is that you're setting the whole background property. 重复的原因是您要设置整个 background属性。 This overrides any specifics, such as
background-repeat
. 这将覆盖所有细节,例如
background-repeat
。 Try this line: 试试这一行:
document.body.style.background-image = "url(" + dir + images[randomCount] + ")"
instead of what you have. 而不是你所拥有的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.