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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

它很简单，建立一个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标记中。

回答：

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

以上是 如何使用for循环创建具有背景图像的div？ 的全部内容， 来源链接： utcz.com/qa/258589.html

回到顶部