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

我想用

.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; ?>);
}

.项目{
背景：url（example.com/images/）；
}

它可以工作，但每个div都有完全相同的背景图像（例如bg3.jpg），我希望每个div都有不同的随机背景（我不介意它们偶尔重复一次）

我试过这个：

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

.item{
背景：url（）

同样的结果

我想我需要使用JavaScript（我绝对没有这方面的经验）来实现这一点。我找到了一个适用于随机背景色的有效解决方案：

---

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

只需将任何图像URL添加到数组中。添加的图像越多，重复的机会越小

有关解释，请参见下面的内联注释：

//使用所需背景图像的URL设置数组：
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"
];
//将item类中的所有div元素放入集合中
var divs=document.queryselectoral（“div.item”）；
//将集合转换为数组，以便可以使用.forEach循环
var divArray=Array.prototype.slice.call（divs）；
//在阵列上循环。。。
forEach（函数（div）{
//获取从0到数组中最高索引的随机数
var randomNum=Math.floor（Math.random（）*randomImagess.length）；
//将backgroundImage属性设置为随机URL
div.style.backgroundImage=“url（“+randomImagess[randomNum]+”）；
})；

div.item{
/*这些样式只是为了确保演示适合预览区域*/
宽度：175px；
高度：175px；
浮动：左；
边框：1px纯黑；
/*使用backgroundsize:contain将整个图像放入div的空间中
将根据需要放大/缩小图像，使其完全适合。
或者，使用background size:cover缩放图像以适应div的空间*/
背景尺寸：封面；
}

div1
第2组
div3

只需将php代码封装到一个函数中，然后对每个Div使用内联样式，因为在重复类定义的地方要少一些，最后一个定义只起作用

对于EAX示例：

    <?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
元素都使用同一个类，并且您设置了该类的
backgrond
属性，那么您的背景将为所有div元素设置。也许您想使用不同的类，或者给元素一个单独的ID？@BenjaminJ。您不必在类上设置
背景图像。OP说他不需要o让所有
div.item
元素都有一个随机的背景，所以你只需要影响这些元素。你不需要在类样式规则中设置图像。@ScottMarcus:是的，我知道。这就是我的评论的意思。@BenjaminJ。听起来一点也不像。听起来你好像不明白要求什么。Individidual类和/或
id
s不是必需的。谢谢！这正是我的意思。但是，它对我不起作用…我把代码放在头上，在里面。我做错了什么？@Barcin确保你的
脚本在
主体
标记关闭之前就在文件中。如果你把它放在
头上
它会进行搜索对于
div
元素，在它们被解析到内存之前。通过在
主体
关闭之前放置脚本，所有其他HTML元素都已经被添加到内存中，并且可以被JavaScript找到。谢谢，但是这些div是由插件自动生成的，我不能单独设置它们的样式（或者，如果可以的话，我不想这样做，因为会有很多）。无论如何，谢谢！@Barcin，所以适合您的解决方案是使用客户端解决方案，即JavaScript，如Scott的解决方案。