CSS attr() 与 url 路径的连接

Question

如何将 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
    }

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

Answer 1

无法从两个或多个字符串中创建复合 url() 值。在遗留的 url() 值之上，它甚至不是一个合适的 CSS 函数（参见 — which means you can't even do this with custom properties), the proper CSS function version of url() as defined in css-values-3 只接受一个字符串。¹

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

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

CSS attr() 与 url 路径的连接

CSS attr() concatenation with url path

css

concatenation

attr