的问题：

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

截至撰写时，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 2

在 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 等脚本。

<强>参考：

<强>感谢：

Hashem Qolami 用于更正我的语法。：）

Answer 3

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

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

使用{strong>自定义属性（MDN，{{3} }，csswg）。

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

data-

attr()

CSS通过data-image attr设置背景图像

4 个答案:

的问题：