javascript - 基于 html 标题值的 css 中的图像 url

Question

我正在尝试使用 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 } ?>

这很好用，我制作了一个 div，每次都有不同的类名和正确的标题(基于图像的文件名)。现在我想在 scss 中有一个 for 循环来绘制六边形，我还想在那里定义背景图像。但由于我无法将任何类型的变量从 html/php 传递到 css/sass，而且 attr() 函数不受广泛支持，我无法动态地执行此操作，这会导致标题可能与图像不匹配。反正有没有办法做到这一点？还是我必须完全使用不同的方法？

我想在其中定义图像的 sass 示例:

.hexagon_loc {
$image: '../../resources/images/bill.jpeg';
@include hexagon($image);
margin-left: 100px;
}

使用 vanilla JavaScript 也可以解决这个问题

谢谢

Answer 1

在这种情况下，我会使用 <img> HTML 元素。

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

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