CSS通过data-image attr设置背景图像

Question

我有这种模式的元素:

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

我想将这些元素设置background-image为data-image.我测试这个CSS代码:

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

边框显示正确但背景没有发生怎样才能用css(不是js或jq)修复此代码？

Answer 1

在截稿时,该浏览器支持的attr()符号上比其他的CSS属性content-像background-image-是非常有限的.

此外,根据CSS 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>

Answer 2

在您的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中查看此文档.但主要问题是它不起作用,还没有!.在许多浏览器中,attr()当它content:在CSS编码的属性中使用时成功运行.但是在CSS的其他属性中使用它,它不能按预期工作,即使在主流浏览器中也是如此.

方案:

• 使用JavaScript或jQuery等脚本.

参考文献:

• W3C attr()
• MDN attr()

谢谢:

• Hashem Qolami用于纠正我的语法.:)

Answer 3

如果目标是能够background-image从HTML文档而不是CSS定义中设置HTML元素的样式,为什么不使用styleHTML元素的内联属性？

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>by style不是一个选项,您可以给它一个类并按类名选择它.

Answer 4

自定义属性（MDN，csswg，css-tricks）可以很好地替代data-属性（或attr()一般方法）。

因为它们的值不限于字符串，所以我们可以传递任何允许作为自定义属性值的类型！

此外，您还可以通过交换样式表在运行时更新这些属性。

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

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