javascript - 如何使用 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; ?>

您还需要确保divs 具有width并已height定义（以使它们可见）。

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

Answer 2

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