如何仅使用 html 和 css 动态分配背景图像 url？

Question

我试图通过 css 从 html 标签上定义的属性动态分配 background-image 的 url。但似乎 attr() 和 var() 都不起作用。我避免使用 javascript 因为 url 稍后可能会更改所以我必须再次手动触发该脚本。

有更好的解决方案吗？

body {
  display: flex;
}

.normal, .attr, .var {
  flex: 1;
  height: 240px;
  border: solid 1px #666;
  background-size: cover;
}

.normal {
  background-image: url("https://picsum.photos/320/240");
}

.attr {
  background-image: url(attr(data-bg));
}

.var {
  background-image: url(var(--url));
}

<div class="normal"></div>
<div class="attr" data-bg="https://picsum.photos/320/240"></div>
<div class="var" style="--url: 'https://picsum.photos/320/240';"></div>

更重要的是，如果可能的话，我希望我可以连接字符串。

.image {
  border: solid 1px #666;
  width: 320px;
  height: 240px;
  /* I wish this is possible */
  background-image: url("http://www.example.com/images/" attr(data-bg) ".png");
}

<div class="image" data-bg="adorable_cat"></div>

Answer 1

即使我觉得简单地使用内联 background-image 属性会更容易（特别是如果你想连接 url 字符串）。为了简单使用，您可以这样做：

<div class="var" style="--url: url(https://picsum.photos/320/240)"></div>

.var {
  background-image: var(--url);
}

由于我不清楚的原因，使用 url(var(--url)); 似乎根本不起作用（至少在 Chrome）

Answer 2

将嵌入式样式表放入文档的 :

<style type="text/css">
.logo
{
background: #FFF url(<?php echo $variable_holding_img_url; ?>);
}
</style>

了解更多信息

enter link description here

How to have dynamic image as CSS background?

如何仅使用 html 和 css 动态分配背景图像 url？

How to assign background-image url dynamically with only html and css?

html

css

css-variables