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属性值的其余部分，并为其指定尺寸。

如果您想抓取背景图片的网址并将其打印为内容，那么CSS无法实现。您需要使用JavaScript查看计算的background-image值，解析该值并将其作为内容插入，而不是使用:after伪元素。