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 (см. Есть ли способ интерполировать переменные CSS с помощью url()? - что означает, что вы даже не можете сделать это с пользовательскими свойствами), правильная версия функции CSS url() как определено в css-values-3, принимает только одну строку. ¹

Вы можете объединить несколько строк в content декларация, но это особенность content свойство, а не строк в CSS.

---

¹ _С url() _{принимает одну строку, это означает, что один} attr() _{может использоваться как значение URL, также новое для css-values-3, так как} attr(image url) _{... кроме поддержки браузера не существует.}