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)");设置背景图片。

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

2 个答案: