基于 html 标题值的 css 中的图像 url答案

【问题标题】：Image url in css based on html title value基于 html 标题值的 css 中的图像 url
【发布时间】：2017-12-08 00:24:13
【问题描述】：

我正在尝试使用 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 来解决这个问题也是可能的

谢谢

【问题讨论】：

将图像添加为图像然后使用 css 设置图像样式，而不是尝试使用 css 背景不是更有意义吗？
或者使用内联样式
内联样式无需任何其他调整即可工作，但我宁愿不使用它。我已经决定使用，经过一些调整后效果很好。
使用实际 IMG 标签的最大好处是您现在可以为屏幕阅读器添加 ALT 标签，这也可能让 Google 更喜欢您。

标签： javascript php html css sass

【解决方案1】：

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

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

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

【讨论】：