使用HTML data-attribute设置CSS background-image url

Question

我计划为朋友建立一个自定义照片库,我确切知道我将如何制作HTML,但是我遇到了一个CSS的小问题.
(如果可能的话,我宁愿没有页面样式依赖于jQuery)

---

我的问题是:在CSS
Data-Attribute中使用HTML
Background-image

---

我使用这种格式的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*/
}

---

我的目标是把data-image-src从div.thumb我的HTML文件,并使用它的每一个div.thumb(或多个)background-image在我的CSS文件来源.

这是一个Codepen Pen,以获得我正在寻找的动态示例:http:
//codepen.io/thestevekelzer/pen/rEDJv

Answer 1

你最终将能够使用

background-image: attr(data-image-src url);

但据我所知,这还没有在任何地方实施.在上面,url是一个可选的"类型或单位"参数attr().请参阅https://drafts.c​​sswg.org/css-values/#attr-notation.

Answer 2

如果您只想使用 HTML 和 CSS 保留它，您可以使用 CSS 变量。请记住，IE 不支持 css 变量。

<div class="thumb" style="--background: url('images/img.jpg')"></div> 

.thumb {
    background-image: var(--background);
}

代码笔：https ://codepen.io/bruce13/pen/bJdoZW

Answer 3

将内容与风格混合不是最佳做法,但解决方案可能是

<div class="thumb" style="background-image: url('images/img.jpg')"></div>

Answer 4

你需要一点JavaScript:

var list = document.getElementsByClassName('thumb');

for (var i = 0; i < list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}

将<script>标签包裹在标签之前的底部</body>标签中,或者包装在页面加载后调用的函数中.