我有那种用这种模式的元素：CSS设置背景图片ATTR
<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）？
在撰写本文时，关于content以外的CSS属性attr() notation的浏览器支持 - 如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>https://jsfiddle.net/x19kjk0g/这本来是不错的：/ –
限制是的，attir（data）在大多数浏览器中都可以使用，但不支持CSS3版本attr（数据类型后备）。 [查看CSS3 attr的浏览器状态]（http://caniuse.com/#search=css3%20attr） – TheCrazyProfessor
在你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的其他属性中使用它，它不会按预期工作，即使在主流浏览器中也不行。
解决方案：
参考：
感谢：
请注意'url（attr（data-image））'*肯定是错误的。根据[CSS值和单元模块级别3]（http://www.w3.org/TR/css3-values/#url），'url（）'表示法只接受裸/引用的'
@HashemQolami，谢谢。但我不明白url的文档。到底什么会代替'url（attr（））'？ – cuSK
正如我所提到的，OP使用了有效的语法：'attr（data-image url）'，它由[spec]（http://www.w3.org/TR/css3-values/#attr）声明。 'attr（）'的新语法是：'attr（
如果目标是能够从HTML文档，而不是CSS定义中设置background-image风格的HTML元素的，为什么不使用内联style的HTML元素的属性？
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>是不是一种选择，你可以给它一个类，按类名选择它。
适用宽度和高度相同。 –
宽度和高度？ –