设置Pseudo Elements内容url图像

Question

我试图将data-img设置为伪元素中的图像而没有成功，这是我到目前为止所尝试的：

标记：

<div data-img="http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg">radomPicture</div>

风格：

div:before{
    content: url('attr(data-img)');
    position:absolute;
    width:200px;
    height:200px;
}

结果损坏的图片：http://jsfiddle.net/vfPKb/

Answer 1

我不完全确定这是可能的。您可能想要使用CSS variables，尽管您可能会遇到与此相同的问题;我不相信你可以发送一个CSS函数一个从另一个生成的值（甚至CSS变量通过var函数访问）。我知道它不是那么令人满意，但你考虑过一些快速简单的jQuery吗？

$("div[data-img]").each(function(){$(this).css("background-image", "url(" + $(this).attr("data-img") + ")")});

这是一个分叉的JSFiddle

如果您不愿意在项目中添加新的库，也可以使用vanilla Javascript做类似的事情。

修改

如果您能够编辑标记，那么更简单（尽管可能不完全可能）的解决方案可能只是使用内联样式：

<div style="background-image: url('http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg')">radomPicture</div>

我无法想象添加img-data属性比添加style属性要容易得多的情况，但我想这取决于如何生成所有这些标记，或者是否这种力量掌握在你手中。