具有网址路径的CSS attr()串联 [英] CSS attr() concatenation with url path

问题描述

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

How can I concatenate the CSS attr() selector with static text in a url() field?

我使用的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
    }

那么-如果可能的话-我该如何实现?

So - if it is possible - How can I achieve this?

推荐答案

无法从两个或多个字符串中创建复合url()值.在旧版url()值之上，该值甚至都不是适当的CSS函数(请参见 css-values-3 中定义的url()仅接受一个字符串. ¹

It is not possible to create a composite url() value out of two or more strings. On top of the legacy url() value, which isn't even a proper CSS function (see Is there a way to interpolate CSS variables with url()? — which means you can't even do this with custom properties), the proper CSS function version of url() as defined in css-values-3 only accepts a single string.¹

您可以在content声明中连接多个字符串，但是这是content属性的功能，而不是CSS中的字符串.

You can concatenate multiple strings in a content declaration, but that is a feature of the content property, not of strings in CSS.

¹ _{由于url()接受单个字符串，所以这确实意味着可以将单个attr() 用作URL值，对于css-values-3 也很新，除了attr(image url) ...... 浏览器支持不存在.}

¹ _{Since url() accepts a single string, this does mean that a single attr() can be used as a URL value, also new to css-values-3, as attr(image url)... except browser support is nonexistent.}

这篇关于具有网址路径的CSS attr()串联的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！