使用 HTML data-attribute 设置 CSS background-image url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15734546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using HTML data-attribute to set CSS background-image url
提问by StephenKelzer
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)
我计划为朋友构建一个自定义照片库，我确切地知道我将如何生成 HTML，但是我遇到了 CSS 的一个小问题。
（如果可能的话，我希望页面样式不依赖于 jQuery）
我的问题是：
Data-AttributeData-Attribute在 HTMLBackground-imageBackground-image中的 CSS
我正在为我的 html 缩略图使用这种格式：
<div class="thumb" data-image-src="images/img.jpg"></div><div class="thumb" data-image-src="images/img.jpg"></div>and I assume the CSS should look something like this:
我假设 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-srcdata-image-src从div.thumbdiv.thumb我的 HTML 文件中获取 ，并将其用于我的 CSS 文件中的每个div.thumbdiv.thumb(s)background-imagebackground-image源。Here is a Codepen Pen in order to get a dynamic example of what I am looking for:
http://codepen.io/thestevekelzer/pen/rEDJv
这是一个 Codepen Pen 以获得我正在寻找的动态示例：http:
//codepen.io/thestevekelzer/pen/rEDJv
采纳答案by StephenKelzer
You will eventually be able to use
您最终将能够使用
background-image: attr(data-image-src url);
but that is not implemented anywhere yet to my knowledge. In the above, urlis an optional "type-or-unit" parameter to attr(). See https://drafts.csswg.org/css-values/#attr-notation.
但据我所知，这还没有在任何地方实施。在上面，url是一个可选的“类型或单位”参数attr()。请参阅https://drafts.csswg.org/css-values/#attr-notation。
回答by Kevin Johne
It is not best practise to mix up content with style, but a solution could be
将内容与风格混为一谈并不是最佳做法，但解决方案可能是
<div class="thumb" style="background-image: url('images/img.jpg')"></div>
回答by Bruce Brotherton
If you wanted to keep it with just HTML and CSS you can use CSS Variables. Keep in mind, css variables aren't supported in IE.
如果您只想使用 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
代码笔：https://codepen.io/bruce13/pen/bJdoZW
回答by Jonathan
You will need a little JavaScript for that:
为此，您需要一点 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 + "')";
}
Wrap that in <script>tags at the bottom just before the </body>tag or wrap in a function that you call once the page loaded.
将其包装在<script>标签之前底部的</body>标签中，或者包装在页面加载后调用的函数中。
回答by CodeFinity
How about using some Sass? Here's what I did to achieve something like this (although note that you have to create a Sass list for each of the data-attributes).
使用一些 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
}
}
Essentially, you list all of your data attribute values. Then use Sass @each to iterate through and select all the data-attributes in the HTML. Then, bring in the iterator variable and have it match up to a filename.
本质上，您列出了所有数据属性值。然后使用 Sass @each 迭代并选择 HTML 中的所有数据属性。然后，引入迭代器变量并使其与文件名匹配。
Anyway, as I said, you have to list all of the values, then make sure that your filenames incorporate the values in your list.
无论如何，正如我所说，您必须列出所有值，然后确保您的文件名包含列表中的值。
回答by Fritz
HTML
HTML
<div class="thumb" data-image-src="img/image.png">
jQuery
jQuery
$( ".thumb" ).each(function() {
var attr = $(this).attr('data-image-src');
if (typeof attr !== typeof undefined && attr !== false) {
$(this).css('background', 'url('+attr+')');
}
});
Demo on JSFiddle
在JSFiddle 上演示
You could do this also with JavaScript.
你也可以用 JavaScript 做到这一点。
回答by Nevil Saul Blemuss
HTML CODE
代码
<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 CODE
代码
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";
回答by lupoll88
For those who want a dumb down answer like me
对于那些像我这样想要一个愚蠢的答案的人
Something like how to steps as 1, 2, 3
像如何步骤 1、2、3 之类的东西
Here it is what I did
这就是我所做的
First create the HTML markup
首先创建 HTML 标记
<div class="thumb" data-image-src="images/img.jpg"></div>
Then before your ending body tag, add this script
然后在结束正文标记之前，添加此脚本
I included the ending body on the code below as an example
我在下面的代码中包含了结尾正文作为示例
So becareful when you copy
所以复制的时候要小心
<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>
