使用HTML数据属性设置CSS背景图片网址

我计划为朋友建立一个自定义的图片库，我确切地知道我将如何制作HTML，但是CSS遇到了一个小问题。
（如果可能，我希望页面样式不依赖jQuery）

我认为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*/
}

这是一支Codepen笔，以便获得我所寻找的动态示例：http :
//codepen.io/thestevekelzer/pen/rEDJv

您最终将可以使用

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

但是据我所知，这还没有实现。上面url是的可选“类型或单位”参数attr()。参见https://drafts.c​​sswg.org/css-values/#attr-notation。

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

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

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

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

混合内容和样式不是最佳做法，但是可以采用以下解决方案

<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 + "')";
}

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

使用一些Sass怎么样？这是我为实现类似目的所做的事情（尽管请注意，您必须为每个数据属性创建一个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遍历并选择HTML中的所有数据属性。然后，引入iterator变量并使它与文件名匹配。

无论如何，正如我所说，您必须列出所有值，然后确保文件名将这些值合并到列表中。

的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进行此操作。

对于那些想要像我这样愚蠢的答案的人

像如何按1、2、3步进行操作

这就是我所做的

首先创建HTML标记

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

然后在结束的body标签之前，添加此脚本

我在下面的代码中包含了结尾正文作为示例

复制时请多加注意

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

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";