HTML将图像URL变量传递给CSS [关闭]答案

【问题标题】：HTML passing image URL variable to CSS [closed]HTML将图像URL变量传递给CSS [关闭]
【发布时间】：2017-09-04 19:38:14
【问题描述】：

我有一个带有图像块的 HTML 模板。这些图像是通过 CSS 使用 background-image 加载的。现在的问题是我无法将这些变量从我的 PHP 代码传递到 CSS 中。我设法想到的唯一解决方案是使用带有背景图像链接的内联 HTML 样式属性，或者只是将图像链接保留为 HTML 中的数据属性并使用 JavaScript 放置背景图像 css。还有其他想法吗？

Using HTML data-attribute to set CSS background-image url

【问题讨论】：

你已经命名了所有的可能性。内联CSS、data-* 或JavaScript。只选择你自己。因为遮阳篷大多是基于意见的。这不是属于 SO 的遮阳篷。
内联 CSS 是最好的解决方案。（对我来说）
谢谢，只是想检查一下是否有其他方法。希望传递给 CSS 的属性有一天会起作用。

标签： javascript html css

【解决方案1】：

如果你不介意内联样式，我还是推荐使用内联background-image。就我个人而言，当我需要更新这个值时，我从来没有遇到过问题，如果你 forEach 一些元素，这种方式似乎很清晰。

使用这种方法的最大优势是您可以使用 html/php 来控制 content，而使用实际的 css 来控制 styling，因此这样做可能会更好而不是将其传递给 css。

<img class="..." style=background-image: url("<?= $img ?>");>

如果您使用 javascript 进行延迟加载，这就像将 style 还原为 data-attribute 一样简单，例如 data-bg

【讨论】：