具有相同類的每個 div 的隨機背景圖像

Question

我想使用.item類對每個 div 應用隨機背景。

我試圖用 PHP 和 CSS 來做到這一點，就像這樣：

<?php
$bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg' );
$i = rand(0, count($bg)-1);
$selectedBg = "$bg[$i]";
?>

.item {
  background: url(example.com/images/<?php echo $selectedBg; ?>);
}

它有效，但每個 div 具有完全相同的背景圖像（例如 bg3.jpg），我希望每個單獨的 div 具有不同的隨機背景（我不介意它們是否偶爾重復一次）。

我試過這個：

.item {
background: url(<?php echo "example.com/images/bg".rand(1, 5).".jpg"; ?>)

結果相同。

我想我需要使用 JavaScript（我完全沒有經驗）來實現這一點。 我找到了一個隨機背景顏色的工作解決方案： http : //jsfiddle.net/VXG36/1/

我想做完全相同的事情，但使用背景圖像。

Answer 1

只需將任何圖像 URL 添加到數組中。 添加的圖像越多，重復的機會就越少。

請參閱下面的注釋以獲取解釋：

 // Set up your array with the URLs of the background images you'll want: var randomImagess = [ "http://laoblogger.com/images/image-of-smiley-face-6.jpg", "http://images.clipartpanda.com/smiley-face-clip-art-RcGG8gecL.jpeg", "http://images.clipartpanda.com/smiley-face-thumbs-up-thank-you-10_smiley_face.jpg", "https://clipartion.com/wp-content/uploads/2015/12/green-smiley-face-images-stock-free-green-830x830.jpg", "https://image.freepik.com/free-photo/cartoon-smile-samuel-smiles-smiley-face-team_121-67198.jpg", "https://i.pinimg.com/236x/ed/e7/08/ede7084f513353a377a4e841d7ba90ed--smiley-face-images-smiley-faces.jpg", "https://cdn.schoolstickers.com/products/en/819/GREEN-SMILE-00.png", "https://buildahead.com/wp-content/uploads/2017/02/happy-emoji-smaller-300x300.png", "https://i.pinimg.com/236x/85/7d/22/857d22615fd70ccbfa10afdffff0eb1b--mad-face-smiley-faces.jpg" ]; // Get all the div elements with the item class into a collection var divs = document.querySelectorAll("div.item"); // Convert the collection into an array so that we can loop with .forEach var divArray = Array.prototype.slice.call(divs); //Loop over the array... divArray.forEach(function(div) { // Get a random number from 0 to the highest index in the array var randomNum = Math.floor(Math.random() * randomImagess.length); // Set the backgroundImage property to the random URL div.style.backgroundImage = "url(" + randomImagess[randomNum] + ")"; });

 div.item { /* These styles are just for making sure the demo fits in the preview area. */ width:175px; height:175px; float:left; border:1px solid black; /* Use background-size:contain to fit the entire image into the div's space. This wil make the image zoom in/out as needed to completely fit. Or, use background-size:cover to scale the image to fit the space of the div. */ background-size:cover; }

 <div class="item">Div 1</div> <div class="item">Div 2</div> <div class="item">Div 3</div>

Answer 2

只需將您的 php 代碼封裝到一個函數中，然后為每個 div 使用內聯樣式，因為關於重復類定義的地方較少，最后一個定義誰將起作用。

例如：

    <?php
    function randImage(){
       $bg = array('bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg' );
       $i = rand(0, count($bg)-1);
       $selectedBg = "$bg[$i]";
       return $selectedBg;
    }

    ?>
    <div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 1</div>
    <div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 2</div>
<div style="background: url(example.com/images/bg<?php echo randImage(); ?>)">Div 3</div>