css3 – 使用HTML数据属性设置CSS background-image url

我计划为朋友建立一个自定义的照片库，我知道我将如何生产的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。

原文地址：https://www.jb51.cc/css/222039.html