使用HTML data-attribute来设置CSS background-image url
我打算为一个朋友build立一个自定义的照片库，我确切地知道我将如何生产HTML，但是我遇到了一个CSS的小问题。
（如果可能的话，我宁愿不要使页面样式依赖于jQuery）
我的问题问候：
HTML中的Data-Attribute
在CSS中的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*/ }
我的目标是从我的HTML文件中的div.thumb中获取data-image-src ，并将其用于CSS文件中的每个div.thumb （s） background-image源文件。
这是一个Codepen笔为了得到我正在寻找的一个dynamic的例子：
http://codepen.io/thestevekelzer/pen/rEDJv
你将最终能够使用
background-image: attr(data-image-src url);
但是这还不是我所知的任何地方。 在上面， url是attr()一个可选的“type-or-unit”参数。 请参阅https://drafts.csswg.org/css-values/#attr-notation 。
把内容和风格混合起来不是最好的做法，但是解决办法可能是
<div class="thumb" style="background-image: url('images/img.jpg')"></div>
您将需要一个小的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 + "')"; }
在</body>标记之前的底部将<script>标记包裹起来，或者在加载页面后调用一个函数。
HTML
<div class="thumb" data-image-src="img/image.png">
jQuery的
$( ".thumb" ).each(function() { var attr = $(this).attr('data-image-src'); if (typeof attr !== typeof undefined && attr !== false) { $(this).css('background', 'url('+attr+')'); } });
在JSFiddle上演示
你也可以用JavaScript来做到这一点。
如何使用一些Sass？ 下面是我做了这样的事情（尽pipe注意你必须为每个数据属性创build一个Sass列表）。
/* Iterate over list and use "data-social" to put in the appropriate background-image. */ $social: "fb", "twitter", "youtube"; @each $i in $social { [data-social="#{$i}"] { background: url('#{$image-path}/icons/#{$i}.svg') no-repeat 0 0; background-size: cover; // Only seems to work if placed below background property } }
本质上，你列出了所有的数据属性值。 然后使用Sass @each遍历并selectHTML中的所有数据属性。 然后，引入迭代器variables并使其匹配到文件名。
无论如何，正如我所说的，你必须列出所有的值，然后确保你的文件名包含在你的列表中的值。
