如何在CSS3中向::before伪元素添加图像

Question

我有一个带有data-avatar url的锚点，该url指向一张图片，我想要在a.avatar::before中添加一个块级图片，以显示该图片。

a[data-avatar]::before {
    content: "";
    background: url( attr(data-avatar url) ) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 5px 0 0;
}

<a href="/username" data-avatar="http://some-url.com/image.png">my profile</a>

我无法使用url(attr(data-avatar))设置背景图像。

如果有人想尝试，请看这个代码片段 - 我只对不需要额外标记的纯CSS方法感兴趣。

http://jsfiddle.net/chovy/RDrxV/

- chovy

---

根据CSS Values and Units Module Level 3的规定，您可以添加一个关键字来指示数据类型。这样，您将得到类似于url(attr(data-avatar url))的东西。然而，我认为这种方式并不被很好地支持（如果有的话）。 - ACJ

我尝试了将URL和字符串作为第二个参数，但都没有起作用。 - chovy

支持可能非常有限甚至不存在。这是一个不错的实验，但如果你想让它真正起作用，你应该选择不同的方法（或者在其上使用一些JavaScript来强制Web浏览器“获取它”）。 - ACJ

是的，这更像是一种挑战而不是必要性。 - chovy

Answer 1

抱歉，如评论中所述，目前CSS2.1的attr()和url()实现无法将元素的自定义数据属性用作生成内容中的图像URL。从值和单位3级中不清楚是否可以/应该将attr()作为参数传递给url()（或者语法是否允许）。

background: url(attr(data-avatar)) no-repeat 0 0;

或者直接传递attr()本身，它将生成一个URL值（考虑到它们具有不同于默认的string类型的独特url类型，这更有可能）：

background: attr(data-avatar url) no-repeat 0 0;

但无论如何，截至2012年，目前没有任何浏览器实现了新的attr()函数，因此您将无法使用纯CSS生成的内容来完成此操作。希望随着模块进入CR阶段，浏览器将开始实现它，因为由于缺乏兴趣而放弃这个功能将是一个巨大的遗憾。

- BoltClock

---

我相信它是一个逗号分隔的列表 attr(data-avatar, url) -- 但是，能够在 CSS 中使用数据属性是很好的。 - chovy

@chovy：似乎不是这样。属性名称和类型之间没有用逗号隔开，但之后的内容是用逗号分隔的。这种不一致很奇怪... - BoltClock

是的，你说得对。MDN文档是这样的：https://developer.mozilla.org/en-US/docs/CSS/attr - chovy

它也在我链接到的规范中。 - BoltClock

我进行了更多的研究，并发现有关此问题在Mozilla上已经被报告了。他们不会修复，因为这将违反规范，因此需要使用-moz-url()而不是url()来添加对attr()的支持。我给W3C发送了电子邮件，请求他们将其添加到规范中。 - chovy

Answer 2

看起来您忘记添加 content 属性了。如果缺少该属性，则不会生成内容：

http://www.w3.org/TR/CSS21/generate.html#content

只需将其设置为空字符串即可。

a[data-avatar]::before {
    content:"";
    background: url(attr(data-avatar)) no-repeat 0 0;
    width: 16px;
    height: 16px;
    display: block;
    margin: 0 5px 0 0;
}

- gkond

---

那行不通。我认为我不能在url()内嵌套attr()。 - chovy

确实还不可能。请看下一个答案。 - svassr