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隨機背景右上角固定

回答

相關問題