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/

在此处输入图像描述

score -2 · Accepted Answer

我不完全确定这是可能的。您可能想弄乱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属性容易得多的许多场景，但我想这取决于所有这些标记是如何生成的，或者该权力是否一开始就在您手中。

1 回答 1