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

只需将任何图片网址添加到数组中即可。您添加的图像越多，重复的可能性就越小。

请参阅下面的评论以获得解释：

// 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使用内联样式，因为关于重复类定义的位置较少，最后一个定义只能用于。

对于eaxmple：

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

具有相同类的每个div的随机背景图像

2 个答案: