如何將圖像添加到css3中的僞元素之前::

我有一個指向圖像的數據頭像url的錨點，我想在a.avatar ::之前添加一個塊圖像以顯示圖像。如何將圖像添加到css3中的僞元素之前::

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/

來源

2012-10-09 chovy

根據[CSS值和單元模塊級別3]（http://www.w3.org/TR/css3-values/#attr），您可以添加一個關鍵字來指示數據的類型。這樣，你會得到'url（attr（data-avatar url））''。但是，我不認爲這得到很好的支持（如果有的話）。 – ACJ

我試過URL和字符串作爲第二個參數，都沒有工作。 – chovy

支持可能僅限於不存在。這是一個很好的實驗，但是如果你想讓它實際工作，你應該選擇一種不同的方法（或者在它的頂部使用一些JavaScript來強制webbowser「獲取它」）。 – ACJ

看來你忘了添加內容屬性。如果它不存在，則不會產生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; 
}

來源

2012-10-09 23:47:54 gkond

doens't工作。我不認爲我可以嵌套attr（）裏面的url（） – chovy

事實上，它仍然是不可能的。 Cf next answer – svassr

對不起，因爲在評論中提到它是不可能與當前CSS2.1實施attr()和url()使用元素的自定義數據屬性，如生成內容的圖像URL。

它是不是從Values and Units level 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年沒有瀏覽器存在公頃s還沒有實現新的attr()函數，所以你不能用純CSS生成的內容來做到這一點。希望瀏覽器現在可以開始實現它，因爲模塊已經進入了CR，因爲由於缺乏興趣而看到這個功能被放棄，這將是一個巨大的恥辱。

來源

2012-10-10 01:06:59 BoltClock

我認爲這是一個逗號分隔的列表attr（data-avatar，url） - 但是，如果能夠在css中使用數據屬性將會很好。 – chovy

@chovy：看起來並不如此。屬性名稱和類型不以逗號分隔，而是以逗號分隔的*之後。這很奇怪，爲什麼這裏有不一致...... – BoltClock

是的，你是對的。 MDN文檔具有這種方式：https：//developer.mozilla.org/en-US/docs/CSS/attr – chovy

如何將圖像添加到css3中的僞元素之前::

回答

相關問題