CSS设置数据图像attr的背景图像

我有这种模式的元素:

<div data-image="{imageurl}" ...></div> 

我想将这个元素的background-imagedata-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浏览器中也是如此。

解答

  • 使用JavaScriptjQuery等脚本。

参考文献

  • 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>