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 レベル 3attr()からは、引数として渡すことができるかどうか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

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