html - CSS 通过数据图像属性设置背景图像

Question

我有一些具有这种模式的元素:

<div data-image="{imageurl}" ...></div>

我想将此元素 background-image 设置为 data-image。我测试这个 CSS 代码:

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

边框显示正确但背景没有任何反应 如何仅使用 css(而不是 js 或 jq)修复此代码？

Answer 1

data- 属性(或一般的 attr() 方法)的一个很好的替代方法是使用自定义属性 ( MDN , csswg , css-tricks ).

由于它们的值不限于字符串，我们可以传递任何允许作为自定义属性值的类型!

此外，您还可以通过样式表交换在运行时更新这些属性。

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>