我计划为朋友建立一个自定义的照片库，我知道我将如何生产的HTML，但我遇到了一个小问题与CSS(我宁愿没有页面样式依赖jQuery如果可能的话)
我的问题：
HTML中的数据属性
CSS中的背景图像
我使用这种格式为我的html缩略图：
< div class =“thumb”data-image-src =“images / img.jpg”>< / div>
我认为CSS应该看起来像这样：
.thumb {
width:150px;
height:150px;
background-position:center center;
overflow:hidden;
border:1px solid black;
background-image: attr(data-image-src);/*This is the question piece*/
}
我的目标是从我的HTML文件中的div.thumb中获取data-image-src，并将其用于我的CSS文件中的每个div.thumb(s)背景图像源。
这是一个Codepen笔，以获得一个动态的例子我正在寻找：
http://codepen.io/thestevekelzer/pen/rEDJv
解决方法
你最终将能够使用
background-image: attr(data-image-src url);
但这不是在我知道的任何地方实现。在上面，url是一个可选的“类型或单位”参数attr()。见https://drafts.csswg.org/css-values/#attr-notation。
