设置伪元素内容 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 属性要容易得多的许多场景，但我想这取决于所有这些标记是如何生成的，或者是否具备这种能力从你的手开始。