Question

我有一个带有数据头像网址的锚点，指向一个图像，我想在a.avatar ::之前添加一个块图像以显示图像。

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/

Answer 1

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

Values and Units level 3是否可以/应该将attr()作为参数传递给url()（或者如果语法甚至允许它），这一点尚不清楚：

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

或者只是传递attr()本身，它会生成一个网址值（这更可能是因为它们与默认的url类型有明显的string类型）：

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

但无论如何，截至2012年，现有的浏览器尚未实现新的attr()功能，因此您无法使用纯CSS生成的内容执行此操作。希望浏览器在模块进入CR后就开始实现它，因为看到这个功能由于缺乏兴趣而丢失是一件非常遗憾的事。

Answer 2

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

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;
}

如何在css3中将图像添加到:: before伪元素

2 个答案: