在css之前/之后使用背景图像的数据属性答案

【问题标题】：Using data attributes in css before/after for a background image在css之前/之后使用背景图像的数据属性
【发布时间】：2014-04-02 15:23:16
【问题描述】：

所以我的 HTML 标记看起来像这样：

<a href="#" data-icon="data:image/png;base64,iVKAInsdal...">Some link</a>

然后我想在我的 CSS 中使用 data-icon 来显示为 base 64 背景图像。比如：

a:before {
    content: "";
    width: 16px;
    height: 16px;
    padding-left: 16px;
    background: url(attr(data-icon)); // this doesn't work
}

有什么办法吗？

【问题讨论】：

不使用 css。但是我们可以用jquery来做。你想要吗？
你不能用content: attr(data-icon);吗？
谢谢。我将能够让它与 jQuery 一起工作。我只是想看看 CSS 是否可行。
@BeatAlex，仅适用于文本内容，不适用于基于 64 位的 data-uri 图像。我应该在帖子中提到这一点。
使用 CSS 是可能的，请参阅下面我修改后的答案......只是不是你想象的那样

标签： html css pseudo-element

【解决方案1】：

This IS possible!

（但不是你的想法）

a{
    background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRrlZZQ3MwNcconkIeLX3_nS_IV81gJ8rincQsipqXGsiBkPmCX);
    background-repeat:no-repeat;
    background-position:1000px 1000px;
}

a:before {
    content: '';
    width: 16px;
    height: 16px;
    padding-left: 16px;
    background-image: inherit;
    background-position:0px 0px;
}

很遗憾，您尝试执行的操作不起作用，attr 仅适用于 content 属性。

唯一可能的选择是给父元素一个背景图像，然后将伪元素上的background-image 设置为inherit。如果您将父元素background-position 设置在其边界之外，然后将伪元素设置为零，则会产生相同的效果，即在父元素上没有图像，但在伪元素上显示图像。

【讨论】：

这很聪明！
@BeatAlex...并非万无一失，也有其缺点，但我能想到的唯一方法几乎可以完成 OP 所追求的目标
您也需要将 content: 更改为 content:''; :) +1
绝对非常聪明 :) 我需要它是独特的图标。我有一个这样的链接列表，每个链接都有我想显示的自己的图标。我想我需要另辟蹊径。谢谢你的想法 - 非常漂亮！
它仍然可以工作...只需设置内联背景图像而不是您的数据属性：jsfiddle.net/swfour/TVre9/2 这将完成同样的事情，而不受限制在您的CSS

【解决方案2】：

试试：

content: attr(data-icon);

Codepen

JsFiddle

这仅适用于基于文本的 data 属性，但不适用于图像。

您可以应用普通背景，但只有content 允许attr。

【讨论】：

看看 SW4 的回答，他搞定了。 @dmathisen
它只适用于文本，不适用于显示图像