Javascript随机背景右上角固定

我得到了代码工作，基本上。我无法将图片设置为网站布局的右上角。这是违反底部权利，这不是我想要的。Javascript随机背景右上角固定

获取它的任何帮助，使图像显示在右上角，因为我不知所措。

我敢打赌这件事很简单。 >的.o

<script type='text/javascript'> 
var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png','http://s33.postimg.org/y1sy7zkvz/BG2.png','http://s33.postimg.org/icmelisu7/BG3.png','http://s33.postimg.org/twvtrar9b/BG4.png','http://s33.postimg.org/xvy4urypr/BG5.png','http://s33.postimg.org/kpmh0h75r/BG6.png','http://s33.postimg.org/7d6aukl8f/BG7.png','http://s33.postimg.org/3xsf9m933/BG8.png','http://s33.postimg.org/4dhh7uz5r/BG9.png','http://s33.postimg.org/6kzi108lb/BG10.png','http://s33.postimg.org/3jmyfngjj/BG11.png','http://s33.postimg.org/55klqfkan/BG12.png'], 
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 

document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
</script>

按照此要求是真实所进行的CSS的一部分：

对没错，这里是一个的所进行的CSS：

html,body { 
background: url(http://s33.postimg.org/7nk1hqiwv/Woosh2.png) right bottom fixed no-repeat, url(http://s33.postimg.org/nk9mmywjj/ONEMORETIME.png) left top fixed no-repeat, url(http://s33.postimg.org/xgapmm2bj/Left_Side_Repeat.png) left bottom fixed repeat-y, url(http://s33.postimg.org/k00q0gawv/6_Done.png) fixed repeat; 
color:#FFF; 
text-shadow:#000 1px 1px 0; 
font-family: "Comic Sans MS", "Trebuchet MS", "Bitstream Vera Sans", "Verdana", sans-serif; 
font-size: 12px; 
margin: 0; 
padding:0; 
height: 100%; 
}

至于它的HTML在论坛主持人Zetaboards上。所以HTML大部分是自动的。

来源

2016-06-13 Christopher Thompson

你可以张贴一些HTML和CSS文件？你的问题不在于提供的js代码（我想你的bg图像在屏幕上呈现）。 – ali404

你......实际上是通过问这个问题来解决我的问题。它将它放置在我正在进行的背景图像的最顶层位置。你是一个天才。 ;） –

看看这个基于你的代码https://plnkr.co/edit/zEQbUhvDE4Ug2GYL96Tc?p=preview创建的plunker，希望它有帮助，否则做修改，因为你的代码，让我们知道你在哪里面临的问题。 – Deep

您也可以通过JavaScript设置默认背景位置，这样的：

document.body.style.backgroundPosition = 'right top'

应该是相当不言自明。

你可以看到它在这里工作。

var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png', 'http://s33.postimg.org/y1sy7zkvz/BG2.png', 'http://s33.postimg.org/icmelisu7/BG3.png', 'http://s33.postimg.org/twvtrar9b/BG4.png', 'http://s33.postimg.org/xvy4urypr/BG5.png', 'http://s33.postimg.org/kpmh0h75r/BG6.png', 'http://s33.postimg.org/7d6aukl8f/BG7.png', 'http://s33.postimg.org/3xsf9m933/BG8.png', 'http://s33.postimg.org/4dhh7uz5r/BG9.png', 'http://s33.postimg.org/6kzi108lb/BG10.png', 'http://s33.postimg.org/3jmyfngjj/BG11.png', 'http://s33.postimg.org/55klqfkan/BG12.png']; 
 
selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 
 

 
document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
 
document.body.style.backgroundPosition = 'right top';

来源

2016-06-13 02:32:26

我试过了，但它被自己插入的CSS线覆盖。我现在知道我做错了什么，以及为什么当我尝试时这不起作用。我以为我疯了。我感谢你确认我实际上并非如此。 –

很高兴听到它现在对你有用。不幸的是，我忘了看看你的CSS代码，所以我没有考虑到覆盖。哎呀！ –

<!DOCTYPE html> 
<html> 
<style> 
.bodyclass 
{ 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: right; 
    background-position: right 20px top 10px; 
} 
</style> 
<body class="bodyclass"> 

<p id="demo">Click the button to change the text in this paragraph.</p> 

<button onclick="myFunction()">Try it</button> 

<script> 
function myFunction() { 

var bgColorArray = ['http://s33.postimg.org/5xlufyx6n/image.png','http://s33.postimg.org/y1sy7zkvz/BG2.png','http://s33.postimg.org/icmelisu7/BG3.png','http://s33.postimg.org/twvtrar9b/BG4.png','http://s33.postimg.org/xvy4urypr/BG5.png','http://s33.postimg.org/kpmh0h75r/BG6.png','http://s33.postimg.org/7d6aukl8f/BG7.png','http://s33.postimg.org/3xsf9m933/BG8.png','http://s33.postimg.org/4dhh7uz5r/BG9.png','http://s33.postimg.org/6kzi108lb/BG10.png','http://s33.postimg.org/3jmyfngjj/BG11.png','http://s33.postimg.org/55klqfkan/BG12.png'], 
    selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)]; 

document.body.style.backgroundImage = 'url(' + selectBG + ')'; 
} 
</script> 

</body> 
</html>

来源

2016-06-13 02:27:37

Javascript随机背景右上角固定

回答

相关问题