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

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

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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