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函数（参见Is there a way to interpolate CSS variables with url()? - 这意味着您甚至无法使用自定义属性执行此操作），正确的CSS函数版本{ css-values-3中定义的{1}}只接受一个字符串。¹

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

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

CSS attr（）与url路径连接

1 个答案: