CSS attr() 与 url 路径连接 [英] CSS attr() concatenation with url path

问题描述

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

我使用的 HTML:

//示例2<div image='static.png'></div>//例3、4、5

例如:

//image 属性包含图像名称(需要时还包含前缀位置，参见示例 2)div[图像]:之前{背景图像:url('/Image/static.png');//作品背景图片:网址(属性(图片))；//作品背景图片:url('/Image/' attr(image));//失败背景图像: url('/Image/' #attr(image));//失败背景图像: url('/Image/' {attr(image));//失败}

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

解决方案

不可能从两个或多个字符串中创建复合 url() 值.在遗留的 url() 值之上，它甚至不是一个合适的 CSS 函数(参见 有没有办法用 url() 插入 CSS 变量? — 这意味着你甚至不能用自定义属性来做到这一点)，url() 的正确 CSS 函数版本，如 css-values-3 只接受一个字符串.¹

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

<小时>

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

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

The HTML I use:

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

For example:

//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?

解决方案

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.¹

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

---

¹ _{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() 与 url 路径连接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！