css - 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伪元素。