css - 如何将图像添加到::在css3中的伪元素之前

Question

我有一个带有指向图像的数据头像 url 的 anchor ，我想将 block 图像添加到 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)) 设置背景图片

如果有人想试一试，这里有一个 fiddle ——我只对没有无关标记的纯 CSS 方法感兴趣。

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

Answer 1

抱歉，如评论中所述，当前 CSS2.1 的 attr() 和 url() 实现无法使用元素的自定义数据属性作为生成内容中的图像 URL。

从Values and Units level 3不清楚是否可以/应该将 attr() 作为参数传递给 url()(或者语法是否允许):

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

或者只是传递 attr() 本身，它会生成一个 URL 值(这更有可能是因为它们具有与默认 不同的 url 类型字符串 类型):

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

但无论哪种方式，截至 2012 年，还没有浏览器实现新的 attr() 函数，因此您将无法使用纯 CSS 生成的内容来实现这一点。希望浏览器在该模块已进入 CR 后开始实现它，因为看到由于缺乏兴趣而放弃此功能将是一个巨大的耻辱。