CSS设置数据图像attr的背景图像
我有这种模式的元素：
<div data-image="{imageurl}" ...></div> 我想将这个元素的background-image为data-image 。 我testing这个CSS代码：
div[data-image] { border: 2px solid black; background-image: attr(data-image url); }
边框显示正确，但没有发生背景如何修复这个代码只与CSS（而不是js或jq）？
在编写的时候，对content之外的CSS属性（比如background-image attr()的attr()表示法的浏览器支持是非常有限的 。
此外，根据CSS级别2规范 ， url()和attr()是无效的：
content: url(attr(data-image));
因此，目前没有跨浏览器的CSS解决scheme来实现预期的结果。 除非使用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>
在你的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的其他属性中使用它，它并不像预期的那样工作，即使在主stream浏览器中也是如此。
解答 ：
- 使用JavaScript或jQuery等脚本。
参考文献
- W3C的attr（）
- MDN attr（）
感谢 ：
- 哈希姆Qolami纠正我的语法。 🙂
如果目标是能够从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>
