Javascript 基于html标题值的css图像url

我正在尝试使用php for循环生成多个带有背景图像的六边形：

<?php
        $dir    = 'resources/images/logos';
        $images = scandir($dir);
        for($i = 2; $i < count($images); $i++) {
            $title = explode('.', $images[$i])[0];
            ?>
                <div class="hexagon_loc<?= $i ?>">
                    <div class="hexagon image" title="<?= $title ?>"></div>
                </div>
    <?php } ?>

使用普通JavaScript来解决这个问题也是一种可能

---

谢谢

在这种情况下，我会使用HTML元素

有一个CSS解决方案，但许多浏览器不支持它

div { background-image : attr(data-image); }

---

将图像添加为图像，然后使用css设置图像样式，而不是尝试使用css背景，这不是更有意义吗？或者使用内联样式内联样式在没有任何其他必要调整的情况下工作，但我宁愿不使用它。我已经习惯了使用，经过一些调整后效果很好。使用实际的IMG标签的最大好处是你现在可以为屏幕阅读器对它们进行ALT标记，这也可能让谷歌更喜欢你。

div { background-image : attr(data-image); }