Javascript随机背景右上角固定

时间:2016-06-13 02:11:07

标签: javascript css image random background

基本上我得到了代码。我无法在网站布局上将图像设置为右上角。这是默认的右下角,这不是我想要的。

任何有关获取它的帮助,所以图像显示在右上方,因为我不知所措。

我敢打赌它也很简单。 >的.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%;
}

至于它在论坛主持人Zetaboards上的HTML。所以HTML主要是自动化的。

2 个答案:

答案 0 :(得分:0)

<!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>

答案 1 :(得分:0)

您还可以通过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';