使用HTML数据属性设置CSS背景图像URL(Using HTML data-attribute t

我计划建立一个朋友定制的照相馆，我知道我究竟如何我将要产生HTML，但是我正在与CSS一个小问题。
（我宁愿没有如果可能的话在页面样式依靠的jQuery）

我的问题关于：
Data-Attribute在HTML
Background-image在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*/
}

我的目标是把data-image-src从div.thumb在我的HTML文件，并用它为每个div.thumb （S） background-image源在我的CSS文件。

这里是一个Codepen笔为了得到什么，我要寻找一个动态的例子：
http://codepen.io/thestevekelzer/pen/rEDJv

Answer 1:

您将最终能够使用

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

但没有实现任何地方还没有我的知识。在上文中， url是一个可选的“类型或单元”参数来attr() 见https://drafts.csswg.org/css-values/#attr-notation 。

Answer 2:

这不是混淆的风格内容的最佳实践，而是一种解决方案可能是

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

Answer 3:

你需要为一些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>标签或在您致电一旦页面加载的功能包。

Answer 4:

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这样做也。

Answer 5:

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

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

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

Codepen： https://codepen.io/bruce13/pen/bJdoZW

Answer 6:

如何使用一些无礼的话？这是我做了实现这样的事情（但请注意，你必须创建为每个数据属性的萨斯列表）。

/*
  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
  }
}

从本质上讲，你列出所有数据的属性值。然后使用萨斯@each来遍历并选择在HTML中的所有数据的属性。然后，把在迭代变量并将它匹配到一个文件名。

无论如何，正如我说的，你必须列出所有的值，然后确保你的文件名包含在你的列表中的值。

Answer 7:

HTML代码

<div id="borderLoader"  data-height="230px" data-color="lightgrey" data- 
width="230px" data-image="https://fiverr- res.cloudinary.com/t_profile_thumb,q_auto,f_auto/attachments/profile/photo/a54f24b2ab6f377ea269863cbf556c12-619447411516923848661/913d6cc9-3d3c-4884-ac6e-4c2d58ee4d6a.jpg">

</div>

JS代码

var dataValue, dataSet,key;
dataValue = document.getElementById('borderLoader');
//data set contains all the dataset that you are to style the shape;
dataSet ={ 
   "height":dataValue.dataset.height,
   "width":dataValue.dataset.width,
   "color":dataValue.dataset.color,
   "imageBg":dataValue.dataset.image
};

dataValue.style.height = dataSet.height;
dataValue.style.width = dataSet.width;
dataValue.style.background = "#f3f3f3 url("+dataSet.imageBg+") no-repeat 
center";

Answer 8:

对于那些谁想要像我这样的哑下来答案

像如何步骤1，2，3

这是我做的

首先创建的HTML标记

<div class="thumb" data-image-src="images/img.jpg"></div>

然后，你的身体结束标签之前，添加这个脚本

我包括在下面的代码结束体作为一个例子

当您复制所以becareful

<script>
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>

文章来源: Using HTML data-attribute to set CSS background-image url