使用HTML数据属性设置CSS背景图像网址 [英] Using HTML data-attribute to set CSS background-image url

问题描述

我打算为朋友建立一个自定义的照片库，我知道我将如何生产的HTML，但我遇到了一个小问题与CSS。
（我不想页面样式依赖于jQuery，如果可能）

---

我的问题：

数据属性 br>
背景图像在CSS

---

我使用这种格式为我的html缩略图：

< div class =thumbdata-image-src =images / img.jpg>< / div>

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.
(I would prefer to not have the page styling rely on jQuery if possible)

---

My question regards:
Data-Attribute in HTML
Background-image in CSS

---

I am using this format for my html thumbnails:
<div class="thumb" data-image-src="images/img.jpg"></div>

我假设CSS应该是这样：

and I assume the CSS should look something like this:

.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 $ c> div.thumb ，并将其用于每个 div.thumb （s） background-image

---

My goal is to take the data-image-src from the div.thumb in my HTML file and use it for each div.thumb(s) background-image source in my CSS file.

这是一个Codepen笔，以获得我正在寻找的动态示例：

http://codepen.io/thestevekelzer/pen/rEDJv

Here is a Codepen Pen in order to get a dynamic example of what I am looking for:
http://codepen.io/thestevekelzer/pen/rEDJv

推荐答案

您最终将能够使用

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

但是在我所知的任何地方都没有实现。在上面， url 是 attr（）的可选类型或单位参数。请参见 https://drafts.c​​sswg.org/css-values/#attr-notation 。

but that is not implemented anywhere yet to my knowledge. In the above, url is an optional "type-or-unit" parameter to attr(). See https://drafts.csswg.org/css-values/#attr-notation.

这篇关于使用HTML数据属性设置CSS背景图像网址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！