html - 设置伪元素内容 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") + ")")});

这是一个 fork 的 JSFiddle

如果您不愿意向您的元素添加新的库，您也可以使用 vanilla Javascript 做类似的事情。

编辑:

如果您能够编辑标记，一个简单得多(尽管可能不是完全可行)的解决方案可能是只使用内联样式:

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

我无法想象在许多情况下添加 img-data 属性会比添加 style 属性容易得多，但我想这取决于所有的正在生成此标记，或者该权力是否掌握在您手中。