使用data-image属性设置CSS背景图片

Question

我有一些遵循这个模式的元素：

<div data-image="{imageurl}" ...></div>

我想将这个元素的background-image设置为data-image。我测试了这段CSS代码：

我希望将此元素的background-image设置为data-image。我测试了以下CSS代码：

div[data-image] {
    border: 2px solid black;
    background-image: attr(data-image url);
}

边框显示正常，但背景没有变化。如何仅使用CSS修复此代码（不使用JS或JQ）？

- Hossain Khademian

---

为它们应用相同的宽度和高度。 - Suresh Ponnukalai

使用自定义属性？ - Eliran Malka

Answer 1

一个很好的替代方案是使用自定义属性（custom properties）来代替 data- 属性。自定义属性的值不仅限于字符串，可以传递任何允许作为自定义属性值的类型。此外，使用自定义属性还能在运行时更新这些属性，只需要切换样式表即可。（参考链接：MDN, csswg, css-tricks）。

.kitten {
  width: 525px;
  height: 252px;
  background-image: var(--bg-image);
}

<div  class="kitten"
      style="--bg-image: url('http://placekitten.com/525/252');">
</div>

- Eliran Malka

---

在我看来，这应该是被认可的解决方案。它允许你设置一个属性，CSS可以使用它来指定背景图片。这只是使用style代替data-*。非常巧妙的解决方案。 - pseudosavant

是的，但如果你有一个动态列表，那就行不通了。 - Ayyash

当在 for 循环中生成输出时，--bg-image 会在每次迭代时重置为新值。 - Ayyash

非常聪明 :) ! - DevWL

@Ayyash 你是指像这样吗...? - Jason C

Answer 2

截至目前，除了content之外的CSS属性（如background-image）上attr()符号的浏览器支持非常有限。。

此外，根据CSS level 2规范，组合使用url()和attr()是无效的：
content: url(attr(data-image));。

因此，目前没有跨浏览器的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>

- Hashem Qolami

---

限制是的，attir(data)在大多数浏览器中都可以工作，但CSS3版本的attr(data type fallback)不受支持。请参见CSS3 attr的浏览器状态。 - TheCrazyProfessor

Answer 3

在您的HTML中：

<div data-image="path_to_image/image_file.extension" ... ></div>

在你的CSS中：

div:after {
    background-image : attr(data-image url);
    /* other CSS styling */
}

问题：

这是您需要的答案。请查看w3.org中的文档。但主要问题是它还没有生效！在许多浏览器中，当它用于CSS编码的content:属性时，attr()可以成功运行。但在CSS的其他属性中使用它时，即使在主流浏览器中，它也无法按预期工作。

解决方案：

• 使用JavaScript或jQuery等脚本。

参考资料：

• W3C attr()
• MDN attr()

感谢：

• Hashem Qolami纠正我的语法。:)

- cuSK

---

请注意，url( attr(data-image) )绝对是错误的。根据CSS值和单位模块3级，url()注释只接受裸/带引号的 <string> 作为URI。提问者已经使用了有效的 attr()语法，但浏览器尚未实现它。 - Hashem Qolami

@HashemQolami，谢谢。但我不理解url的文档。在url(attr())的位置上到底会出现什么？ - cuSK

正如我之前提到的，OP使用了有效的语法:attr(data-image url)，这是规范中所述的。attr()的新语法是: attr(<attr-name><type-or-unit>?[,<fallback>]? )，其中可选的<type-or-unit>指定了给定<attr-name>的类型，<fallback>将是默认值，如果命名属性不存在，它将被使用。 - Hashem Qolami

@HashemQolami，非常感谢您的宝贵帮助。我从来没有通过文档学到过什么，我所学的一切都来源于别人的教导。但是，我仍然包括文档链接来帮助提问者澄清问题。 - cuSK

我认为你的CSS中需要将=改为:。 - user2428118

Answer 4

如果目标是在 HTML 文档中设置 HTML 元素的 background-image 样式而不是在 CSS 定义中，为什么不使用 HTML 元素内联的 style 属性呢？

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>

编辑:

如果不能通过样式选择<div>，您可以给它一个类并通过类名来选择。

- Carvo Loco

---

这是一个简单的解决方案，可以避免浏览器不兼容问题，因此应该得到赞同。 - Joschi