我有这种模式的元素：
<div data-image="{imageurl}" ...></div>
我想将这个元素的background-image设置为data-image.我测试这个CSS代码：
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
解决方法
作为写作,
attr() notation的浏览器支持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>
