4

我有一个带有指向图像的 data-avatar 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/

4

2 回答 2

5

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

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

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

或者只是传递attr()自己，它会生成一个 URL 值（这更有可能是因为它们具有url与默认类型不同的string类型）：

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

但无论哪种方式，截至 2012 年，尚无浏览器实现新attr()功能，因此您将无法使用纯 CSS 生成的内容来执行此操作。希望浏览器在模块已经进入 CR 之后就开始实现它，因为如果看到这个功能由于缺乏兴趣而被放弃，那将是一个巨大的耻辱。

于 2012-10-10T01:06:59.410 回答
0

您似乎忘记添加内容属性。如果它不存在，则不会生成内容：

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;
}
于 2012-10-09T23:47:54.243 回答