89

我计划为朋友构建一个自定义照片库，并且我确切地知道我将如何生成 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 文件中获取，并将其用于我的 CSS 文件中的每个div.thumb（s）background-image源。

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

4

9 回答 9

71

您最终将能够使用

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

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

于 2013-08-25T17:52:49.407 回答
46

如果你想只保留 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

于 2019-04-02T12:43:31.117 回答
17

将内容与风格混为一谈并不是最佳做法，但解决方案可能是

<div class="thumb" style="background-image: url('images/img.jpg')"></div>
于 2015-05-28T16:23:42.137 回答
7

为此，您将需要一点 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>标签中，或者包装在页面加载后调用的函数中。

于 2013-05-29T20:45:30.857 回答
2

使用一些 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 中的所有数据属性。然后，引入迭代器变量并使其与文件名匹配。

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

于 2017-10-10T15:15:36.317 回答
1

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 做到这一点。

于 2015-04-16T12:49:35.910 回答
1

对于像我这样想要一个愚蠢答案的人

类似于如何按照 1、2、3 的步骤进行操作

这就是我所做的

首先创建 HTML 标记

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

然后在结束正文标记之前，添加此脚本

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

复制时要小心

<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>
于 2019-02-16T05:57:31.343 回答
1

这是使用 jQuery 的简单示例，我们可以将图像放在背景中

$('*[data-background-image]').each(function() {
    $(this).css({
        'background-image': 'url(' + $(this).data('background-image') + ')'
    });
});
div{
  height:200px;
  width:100% ;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div data-background-image="https://via.placeholder.com/500"> </div>

于 2021-05-03T07:22:24.033 回答
0

代码

<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";
于 2018-04-15T16:44:04.727 回答