隨機背景圖像CSS3

我正在做小網站，但是我的背景圖像有5-6張圖片，每次刷新頁面時我都會隨機設置它。這是我在style.css中有：隨機背景圖像CSS3

html { 
    background: url(image/l2.jpg) no-repeat center center fixed 
    -webkit-background-size: cover 
    -moz-background-size: cover 
    -o-background-size: cover 
    background-size: cover 
}

來源

2013-03-05 user2136883

[你有什麼試過？]（http://whathaveyoutried.com） – Chad 2013-03-05 18:56:11

我試過下面的php例子，就像2天前，它不工作。可能是我把它放在錯誤的地方的原因 – user2136883 2013-03-05 19:00:32

如果你的文件擴展名是'.html'，你就不能使用PHP ..這可能是問題所在。 – Dimser 2013-03-05 19:05:19

你不能僅使用HTML CSS &爲了這個目的。你應該做的客戶端（如使用JavaScript）或服務器端（如PHP腳本）

下面是PHP的例子：

<?php 
    $bg = array('bg-01.jpg', 'bg-02.jpg', 'bg-03.jpg', 'bg-04.jpg', 'bg-05.jpg', 'bg-06.jpg', 'bg-07.jpg'); // array of filenames 

    $i = rand(0, count($bg)-1); // generate random number size of the array 
    $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen 
?> 

<style type="text/css"> 
<!-- 
body{ 
background: url(images/<?php echo $selectedBg; ?>) no-repeat; 
} 
--> 
</style>

這裏是jQuery的例子：

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.jpg']; 
$('html').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'});

來源

2013-03-05 18:56:33 MIIB

確定我需要把它放在哪裏？在index.html中？在DOCTYPE之前？ – user2136883 2013-03-05 18:57:38

你可以使用jquery的例子，並將這段代碼放在head標籤處。請記住包括您的jquery.js文件 – MIIB 2013-03-05 19:00:41

好吧，但我還想要其他屬性webkit-background-size：cover -moz-background-size：cover -o-background-size：cover background-size：cover – user2136883 2013-03-05 19:03:36

這是不可能的使用純CSS。你必須使用JavaScript來隨機設置你的網站的背景圖片。

來源

2013-03-05 18:57:23 evsar3

user2136883沒有提到它，但他/她標記了jQuery。我猜這就是爲什麼有降薪。 – MiniRagnarok 2013-03-05 19:06:09

wtf？爲什麼我會得到讚譽？我做了什麼錯誤？ – evsar3 2013-03-05 19:23:08

我會使用JS。在這個例子看看：

<html> 
<head> 
<script type="text/javascript"> 
var totalCount = 8; 
function ChangeIt() 
{ 
var num = Math.ceil(Math.random() * totalCount); 
document.body.background = 'bgimages/'+num+'.jpg'; 
document.body.style.backgroundRepeat = "repeat";// Background repeat 
} 
</script> 
</head> 
<body> 
// Page Design 
</body> 
<script type="text/javascript"> 
ChangeIt(); 
</script> 
</html>

您需要通過隨機數來命名你的圖片正確的號碼，並放置在該圖像文件夾中。

來源

2013-03-05 18:59:51

所有圖像必須位於根文件夾中？或者它仍然可以從「圖像」文件夾？ – user2136883 2013-03-05 19:02:02

它們來自名爲'bgimages'的文件夾。 – 2013-03-05 19:03:33

好吧，它會作爲我的CSS3屬性？伸展到整個窗戶？ – user2136883 2013-03-05 19:06:26

的jQuery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<script type="text/javascript"> 
$(document).ready(function() { 

    var bgArray = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg']; 
    var bg = bgArray[Math.floor(Math.random() * bgArray.length)]; 

    $('body').css('background', bg); 

    // If you have defined a path for the images 
    var path = 'images/bg/'; 

    // then you can put it right before the variable 'bg' 
    $('body').css('background', path+bg); 

}); 
</script>

來源

2013-03-05 18:59:52 Dimser

我應該在哪裏放置它？它會拉伸背景嗎？ – user2136883 2013-03-05 19:20:16

這些標籤之間的標籤'馬克類型=「文本/ JavaScript」>'和''內馬修營顯示頭標籤。然後你需要引用jQuery庫：''也在頭部標籤內。 – Dimser 2013-03-05 19:25:11

檢查編輯。只需複製代碼並將其插入到頭標籤內。如果沒有路徑指向圖像，則可以刪除包含註釋的部分。 – Dimser 2013-03-05 19:27:07

非常短的選項：（如果你可以在頁面中使用PHP）。用你的背景的網址替換單引號中的文件名。

background: url('<?php $a = array('darkred.jpg','red.gif','pink.png'); echo $a[array_rand($a)];?>');

來源

2013-12-04 00:46:34 ssaltman

那麼，最後的答案是非常短，但如果你把它們放在一個文件夾？

<?php 
$pt = 'BGs/'; //folder where you put your BGs  
$bg = array($pt.'bg_ants.png', $pt.'bg_boobs.png', $pt.'bg_circles.png'); // array of filenames 
?> 
<Body background="<?php echo $bg[array_rand($bg)]; ?>">

您可以將其保存在一個文件中，並將其包含在其他頁面的代碼中。例如：將其保存爲「rand.htm」。只需用此代碼替換<body>標籤即可。

<?php include("rand.htm"); ?>

來源

2013-12-06 06:09:21 AhmedJKT48

隨機背景圖像CSS3

回答

相關問題