具有相同类的每个 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 添加到数组中。添加的图片越多，重复的机会就越少。

请参阅下面的内联 cmets 以获得解释：

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