Html CSS 通过数据图像属性设置背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26967890/
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
CSS set background-image by data-image attr
提问by Hossain Khademian
I have sort of elements with this pattern:
我有这种模式的元素：
<div data-image="{imageurl}" ...></div>
I want to set this elements background-imageto data-image. I test this CSS code:
我想将此元素设置background-image为data-image. 我测试这个 CSS 代码：
div[data-image] {
border: 2px solid black;
background-image: attr(data-image url);
}
border show correctly but nothing happened for background How can do I fix this code only with css (not js or jq)?
边框显示正确，但背景没有发生任何事情如何仅使用 css（不是 js 或 jq）修复此代码？
回答by Hashem Qolami
As of writing, the browser support of attr()notationon CSS properties other than content- like background-image- is verylimited.
在撰写本文时，浏览器对除-like -之外的 CSS 属性attr()符号的支持非常有限。contentbackground-image
Besides, as per CSS level 2 spec, combining url()and attr()is not valid:content: url(attr(data-image));
此外，根据CSS 级别 2 规范，组合url()和attr()无效：content: url(attr(data-image));
Hence there is no cross-browser CSS solution at the moment to achieve the desired result. Unless using JavaScript is an option:
因此，目前没有跨浏览器的 CSS 解决方案来达到预期的结果。除非使用 JavaScript 是一种选择：
var list = document.querySelectorAll("div[data-image]");
for (var i = 0; i < list.length; i++) {
var url = list[i].getAttribute('data-image');
list[i].style.backgroundImage="url('" + url + "')";
}div[data-image] {
width: 100px; height: 100px; /* If needed */
border: 2px solid black;
}<div data-image="http://placehold.it/100"></div>回答by Eliran Malka
a nice alternative to data-attributes (or the attr()approach in general) can be the use of custom properties(MDN, csswg, css-tricks).
data-属性（或attr()一般方法）的一个很好的替代方法是使用自定义属性（MDN、csswg、css-tricks）。
as their values are not restricted to strings, we can pass around any type that is allowed as a custom property value!
由于它们的值不限于字符串，我们可以传递任何允许作为自定义属性值的类型！
also, you get the benefit of updating these properties at runtime, with a swap of a stylesheet.
此外，您还可以通过交换样式表在运行时更新这些属性。
.kitten {
width: 525px;
height: 252px;
background-image: var(--bg-image);
}<div class="kitten"
style="--bg-image: url('http://placekitten.com/525/252');">
</div>回答by cuSK
In your HTML:
在您的HTML 中：
<div data-image="path_to_image/image_file.extension" ... ></div>
In your CSS:
在你的CSS 中：
div:after {
background-image : attr(data-image url);
/* other CSS styling */
}
Problems:
问题：
This is your required answer. Check this documentation in w3.org. But the main problem is it won't work, not yet!. In many browsers,
attr()runs successfully when it is used incontent:attribute of the CSS coding. But using it in other attributes of CSS, it doesn't work as expected, not even in major browsers.
这是您需要的答案。在w3.org 中查看此文档。但主要问题是它不会工作，还不会！. 在很多浏览器中，在CSS编码的属性中
attr()使用时运行成功content:。但是在 CSS 的其他属性中使用它时，它不能按预期工作，甚至在主要浏览器中也不行。
Solution:
解决方案：
- Use scripts such as JavaScriptor jQuery.
- 使用JavaScript或jQuery等脚本。
References:
参考资料：
Thanks:
谢谢：
- Hashem Qolamifor correcting my syntax. :)
- Hashem Qolami用于纠正我的语法。:)
回答by Carvo Loco
If the goal is being able to set the background-imagestyle of an HTML element from within the HTML document rather than the CSS definition, why not use the inline styleattribute of the HTML element?
如果目标是能够background-image从 HTML 文档而不是 CSS 定义中设置HTML 元素的样式，为什么不使用styleHTML 元素的 inline属性呢？
div[style^='background-image'] {
width:400px;
height:225px;
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
/* background-image is not set here... */
}<!-- ... but here -->
<div style="background-image:url(http://img01.deviantart.net/5e4b/i/2015/112/c/5/mandelbrot_62____courage_to_leave___by_olbaid_st-d646sjv.jpg)"></div>EDIT:
编辑：
If selecting the <div>by style is not an option, you may be able to give it a class and select it by class name.
如果选择<div>by 样式不是一个选项，您可以给它一个类并按类名选择它。
