CSS attr（）与url路径连接[重复]答案

【问题标题】：CSS attr() concatenation with url path [duplicate]CSS attr（）与url路径连接[重复]
【发布时间】：2017-08-13 10:11:47
【问题描述】：

如何将 CSS attr() 选择器与 url() 字段中的静态文本连接起来？

我使用的 HTML：

<div image='/Require/static.png'></div> //Example 2
<div image='static.png'></div> //Example 3, 4, 5

例如：

//image attribute contains the image name (and prefix location when needed, see example 2)
div[image]:before {
    background-image: url('/Image/static.png'); //Works
    background-image: url(attr(image)); // Works
    background-image: url('/Image/' attr(image)); //Fails
    background-image: url('/Image/' #attr(image)); //Fails
    background-image: url('/Image/' {attr(image)); //Fails
    }

所以 - 如果可能的话 - 我怎样才能做到这一点？

【问题讨论】：

你能把你的HTML和图片标签一起发布吗？
CSS 是不言自明的，不需要 HTML 就能理解。
已更新，见帖子
这是 SVG 还是您只是为了好玩而使用 <text>？
至少看看你面前的其他cmets，谢谢

标签： css concatenation attr

【解决方案1】：

不可能从两个或多个字符串中创建复合 url() 值。在遗留的url() 值之上，它甚至不是一个正确的CSS 函数（参见Is there a way to interpolate CSS variables with url()?——这意味着你甚至不能使用自定义属性来做到这一点），定义的url() 的正确CSS 函数版本在css-values-3 中只接受一个字符串。¹

您可以在 content 声明中连接多个字符串，但 that is a feature of the content property，而不是 CSS 中的字符串。

¹_{由于url() 接受单个字符串，这确实意味着单个attr() 可以用作URL 值，also new to css-values-3 , 如attr(image url)... 除了browser support is nonexistent。}

【讨论】：

感谢您的回答和提供的文档！