我想做如下的事情:
<div style="background-image: url(http://some_url.com);"></div>
div:after {
content: attr(style[background-image]);
}
这里的目标是我想从内联应用到 html 元素的内容中获取内容的值。这可能吗?如果可能,正确的语法是什么?
最佳答案
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
伪元素.
关于css - CSS 'content' 属性可以抓取内联样式的值吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14961245/