CSS'content'屬性可以獲取內聯樣式的值嗎？

Question

我想這樣做如下：

<div style="background-image: url(http://some_url.com);"></div> 

div:after { 
    content: attr(style[background-image]); 
} 

目標是在這裏我想抓住從東西是內聯應用到HTML元素的含量值。這是可能的，如果是的話，那麼正確的語法是什麼？

Answer 1

attr()僅適用於HTML屬性，不適用於CSS屬性。即使你能獲得attr(style)（你實際上可以），你會只獲得屬性，它是以下字符串的文本值：

"background-image: url(http://some_url.com);" 

但是，您將無法做到這個文本值有意義的東西（除非打印爲content也許）。

如果你希望你的僞元素具有相同的背景圖片，你的元素，使用方法：

div:after { 
    background-image: inherit; 
} 

同樣，這本身沒有什麼意義;您必須指定其他樣式，如background屬性值的其餘部分，並指定其尺寸。

如果您想抓取背景圖片的URL並將其作爲內容打印出來，那麼CSS就無法實現。您需要使用JavaScript來查看計算得出的background-image值，解析該值並將其作爲內容插入，而不是使用僞元素:after。