如何使用for循环创建具有背景图像的div？

Question

我有大约9张图片，需要将它设置为div背景图片。每个div都有自己的位置。我需要循环创建不同背景图像的div标签。我怎样才能做到这一点？

Answer 1

它很简单，建立一个style属性与background-image属性。

/* JavaScript + jQuery 
* var listOfImageSrcs = [ 
*  '/rooted/path/to/file', 
*  'relative/path/to/file', 
*  'https://domain.tld/url/to/file' 
* ]; 
for(i in listOfImageSrcs) { 
    var src = listOfImageSrcs[i]; 
    $('<div style="background-image: url(\'' + src + '\');"></div>').appendTo('body'); 
} 

/* PHP 
* $listOfImageSrcs = array(
*  '/rooted/path/to/file', 
*  'relative/path/to/file', 
*  'https://domain.tld/url/to/file' 
*); 
*/ 
<?php foreach($listOfImageSrcs AS $src): ?> 
    <div style="background-image: url('<?php echo($src); ?>');"></div> 
<?php endforeach; ?> 

你还需要确保div■找width和定义height（为了他们是可见的）。

如果您在该图像列表中有background-position信息，您可以将其添加到style标记中。

Answer 2

好吧，您提供了难以回答的上下文，但您可以使用 $.each()循环播放内容，然后您可以使用$().css("background-image", "url(image.jpg)");设置背景图像。