<分区>
标签 html css css-variables
<分区>
我试图通过 html 标签上定义的属性的 css 动态分配 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>最佳答案
即使我觉得简单地使用内联 background-image 属性会更容易(特别是如果你想连接 url 字符串)。为了简单使用，您可以这样做:
<div class="var" style="--url: url(https://picsum.photos/320/240)"></div>
.var {
background-image: var(--url);
}
由于我不清楚的原因，使用 url(var(--url)); 似乎根本不起作用(至少在 Chrome 中)
关于html - 如何仅使用 html 和 css 动态分配背景图像 url？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57283629/