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>

Answer 2

在撰写本文时，attr() notation 对 content 以外的 CSS 属性的浏览器支持 - 例如 background-image - 是 very limited。

此外，根据CSS level 2 spec，组合url() 和attr() 无效：
content: url(attr(data-image));。

因此，目前没有跨浏览器的 CSS 解决方案来达到预期的效果。除非使用 JavaScript 是一种选择：

var list = document.querySelectorAll("div[data-image]");

for (var i = 0; i < list.length; i++) {
  var url = list[i].getAttribute('data-image');
  list[i].style.backgroundImage="url('" + url + "')";
}

div[data-image] {
  width: 100px; height: 100px; /* If needed */
  border: 2px solid black;
}

<div data-image="http://placehold.it/100"></div>

Answer 3

如果目标是能够从 HTML 文档而不是 CSS 定义中设置 HTML 元素的 background-image 样式，为什么不使用 HTML 元素的内联 style 属性？

div[style^='background-image'] {
  width:400px;
  height:225px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  /* background-image is not set here... */
}

<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>

编辑：

如果不能按样式选择<div>，您可以给它一个类并按类名选择它。

Answer 4

在您的 HTML 中：

<div data-image="path_to_image/image_file.extension" ... ></div>

在您的 CSS 中：

div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}

问题：

这是您需要的答案。在 w3.org 中查看此文档。但主要问题是它不会起作用，现在还不行！。在许多浏览器中，attr() 在 CSS 编码的content: 属性中使用时会成功运行。但是在 CSS 的其他属性中使用它，它并不能按预期工作，即使在主流浏览器中也是如此。

解决方案：

• 使用 JavaScript 或 jQuery 等脚本。

参考文献：

• W3C attr()
• MDN attr()

谢谢：

• Hashem Qolami 更正我的语法。 :)