blocks|key|1867598|text|为此，您需要一个小JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1867599|var+list+=+document.getElementsByClassName('thumb');

for+(var+i+=+0;+i+<+list.length;+i%2B%2B)+{
++var+src+=+list[i].getAttribute('data-image-src');
++list[i].style.backgroundImage="url('"+%2B+src+%2B+"')";
}|code-block|syntax|javascript|1867600|将其包装在底部</body>标记之前的<script>标记中，或者包装在页面加载后调用的函数中。|offset|length|style|CODE|1867601|entityMap^0|0|0|7|7|J|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>You will need a little JavaScript for that:</p>

<pre><code>var list = document.getElementsByClassName('thumb');

for (var i = 0; i &lt; list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}
</code></pre>

<p>Wrap that in <code>&lt;script&gt;</code> tags at the bottom just before the <code>&lt;/body&gt;</code> tag or wrap in a function that you call once the page loaded.</p>


blocks|key|1867607|text|您最终将能够使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1867608|background-image:+attr(data-image-src+url);|code-block|syntax|javascript|1867609|但据我所知，这还没有在任何地方实现。在上面的代码中，url是attr()的一个可选的“类型或单位”参数。参见https://drafts.csswg.org/css-values/#attr-notation。|offset|length|style|CODE|1867610|entityMap|0|LINK|mutability|MUTABLE|url|https://drafts.csswg.org/css-values/#attr-notation^0|0|0|Q|3|U|6|1I|1E|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]|$I|Z|J|10|K|L]]|9|@$I|11|J|12|1|13]]|A|$]]|$1|M|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>You will eventually be able to use</p>

<pre><code>background-image: attr(data-image-src url);
</code></pre>

<p>but that is not implemented anywhere yet to my knowledge. In the above, <code>url</code> is an optional "type-or-unit" parameter to <code>attr()</code>. See <a href="https://drafts.csswg.org/css-values/#attr-notation" rel="noreferrer">https://drafts.csswg.org/css-values/#attr-notation</a>.</p>


blocks|key|1867628|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1867629|<div+class="thumb"+data-image-src="img/image.png">|code-block|syntax|javascript|1867630|jQuery|1867631|$(+".thumb"+).each(function()+{
++var+attr+=+$(this).attr('data-image-src');

++if+(typeof+attr+!==+typeof+undefined+&&+attr+!==+false)+{
++++++$(this).css('background',+'url('%2Battr%2B')');
++}

});|1867632|JSFiddle上的演示|offset|length|1867633|你也可以用JavaScript来做这件事。|1867634|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/5fjacdam/^0|0|0|0|0|0|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>HTML</p>

<pre><code>&lt;div class="thumb" data-image-src="img/image.png"&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$( ".thumb" ).each(function() {
  var attr = $(this).attr('data-image-src');

  if (typeof attr !== typeof undefined &amp;&amp; attr !== false) {
      $(this).css('background', 'url('+attr+')');
  }

});
</code></pre>

<p>Demo on <a href="https://jsfiddle.net/5fjacdam/" rel="nofollow">JSFiddle</a></p>

<p>You could do this also with JavaScript.</p>


blocks|key|1867639|text|把内容和风格混在一起并不是最好的做法，但一个解决方案可能是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1867640|<div+class="thumb"+style="background-image:+url('images/img.jpg')"></div>|code-block|syntax|javascript|1867641|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It is not best practise to mix up content with style, but a solution could be</p>

<pre><code>&lt;div class="thumb" style="background-image: url('images/img.jpg')"&gt;&lt;/div&gt;
</code></pre>


blocks|key|2081341|text|使用一些Sass怎么样？下面是我为实现这一点所做的工作(尽管请注意，您必须为每个数据属性创建一个Sass列表)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2081342|/*
++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
++}
}|code-block|syntax|javascript|2081343|本质上，您列出了所有数据属性值。然后使用Sass+@each遍历并选择HTML中的所有数据属性。然后，引入迭代器变量并使其与文件名匹配。|2081344|无论如何，正如我所说的，您必须列出所有的值，然后确保您的文件名包含列表中的值。|2081345|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>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). </p>

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

<p>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.</p>

<p>Anyway, as I said, you have to list all of the values, then make sure that your filenames incorporate the values in your list.</p>


blocks|key|2081370|text|对于像我这样想要一个愚蠢的答案的人来说|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2081371|就像如何按1，2，3步法一样|2081372|这就是我所做的|2081373|首先创建HTML标记|2081374|<div+class="thumb"+data-image-src="images/img.jpg"></div>|code-block|syntax|javascript|2081375|然后，在结束body标记之前添加以下脚本|2081376|我在下面的代码中包含了结尾正文作为示例|2081377|所以当你抄袭的时候要小心|2081378|<script>
var+list+=+document.getElementsByClassName('thumb');

for+(var+i+=+0;+i+<+list.length;+i%2B%2B)+{
++var+src+=+list[i].getAttribute('data-image-src');
++list[i].style.backgroundImage="url('"+%2B+src+%2B+"')";
}
</script>

</body>|2081379|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|14|8|@]|9|@]|A|$K|L]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p>For those who want a dumb down answer like me</p>

<p>Something like how to steps as 1, 2, 3</p>

<p>Here it is what I did</p>

<p>First create the HTML markup</p>

<pre><code>&lt;div class="thumb" data-image-src="images/img.jpg"&gt;&lt;/div&gt;
</code></pre>

<p>Then before your ending body tag, add this script</p>

<p>I included the ending body on the code below as an example</p>

<p>So becareful when you copy</p>

<pre><code>&lt;script&gt;
var list = document.getElementsByClassName('thumb');

for (var i = 0; i &lt; list.length; i++) {
  var src = list[i].getAttribute('data-image-src');
  list[i].style.backgroundImage="url('" + src + "')";
}
&lt;/script&gt;

&lt;/body&gt;
</code></pre>


blocks|key|2081401|text|如果你只想保留HTML和CSS，你可以使用CSS变量。记住，css+variables+aren't+supported+in+IE。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2081402|<div+class="thumb"+style="--background:+url('images/img.jpg')"></div>+|code-block|syntax|javascript|2081403|.thumb+{
++++background-image:+var(--background);
}|2081404|Codepen：https://codepen.io/bruce13/pen/bJdoZW|2081405|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=css%2520variable|1|https://codepen.io/bruce13/pen/bJdoZW^0|U|10|0|0|0|0|8|11|1|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|K|3|L|5|6|7|12|8|@]|9|@$A|13|B|14|1|15]]|C|$]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>If you wanted to keep it with just HTML and CSS you can use CSS Variables. 
Keep in mind, <a href="https://caniuse.com/#search=css%20variable" rel="noreferrer">css variables aren't supported in IE</a>.</p>

<pre><code>&lt;div class="thumb" style="--background: url('images/img.jpg')"&gt;&lt;/div&gt; 
</code></pre>

<pre><code>.thumb {
    background-image: var(--background);
}
</code></pre>

<p>Codepen: <a href="https://codepen.io/bruce13/pen/bJdoZW" rel="noreferrer">https://codepen.io/bruce13/pen/bJdoZW</a></p>


blocks|key|1867740|text|这是一个使用jQuery的简单示例，我们可以将图像放在背景中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1867741|​|1867742|$('*[data-background-image]').each(function()+{
++++$(this).css({
++++++++'background-image':+'url('+%2B+$(this).data('background-image')+%2B+')'
++++});
});|code-block|syntax|javascript|1867743|div{
++height:200px;
++width:100%25+;
++background-size:+cover;
++background-position:+center+center;
++background-repeat:+no-repeat;
}|1867744|<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>|1867745|1867746|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here is simple example using jQuery we can put the images in background</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('*[data-background-image]').each(function() {
    $(this).css({
        'background-image': 'url(' + $(this).data('background-image') + ')'
    });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div{
  height:200px;
  width:100% ;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div data-background-image="https://via.placeholder.com/500"&gt; &lt;/div&gt;</code></pre>
</div>
</div>
</p>



<p>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.<br>(I would prefer to not have the page styling rely on jQuery if possible)
<hr>
My question regards:<br>
<code>Data-Attribute</code> in HTML<br>
<code>Background-image</code> in CSS
<hr>
I am using this format for my html thumbnails:<br>
<code>&lt;div class="thumb" data-image-src="images/img.jpg"&gt;&lt;/div&gt;</code><br><br></p>

<p>and I assume the CSS should look something like this:<br></p>

<pre><code>.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*/
}
</code></pre>

<p><hr>
My goal is to take the <code>data-image-src</code> from the <code>div.thumb</code> in my HTML file and use it for each <code>div.thumb</code>(s) <code>background-image</code> source in my CSS file.</p>

<p>Here is a Codepen Pen in order to get a dynamic example of what I am looking for:<br>
<a href="http://codepen.io/thestevekelzer/pen/rEDJv" rel="noreferrer">http://codepen.io/thestevekelzer/pen/rEDJv</a></p>


Using HTML data-attribute to set CSS background-image url

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我计划为一个朋友建立一个自定义的图片库，我确切地知道我将如何产生HTML，但是我遇到了一个CSS的小问题。(如果可能的话，我不希望页面样式依赖于jQuery )我的问题是：HTML中的Data-AttributeCSS中的Background-image我对我的html缩略图使用以下格式：<div class="thu...

问使用HTML data-attribute设置CSS背景图像url
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML data-attribute设置CSS背景图像urlEN