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 伪元素.