url 경로의 CSS attr() 연결

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()을 만들 수 없습니다. 올바른 CSS 기능이 아닌 기존의 url() 값 (Is there a way to interpolate CSS variables with url()? - 사용자 정의 속성으로도이 작업을 수행 할 수 없음을 나타냄)의 경우 css-values-3에 정의 된 url()의 적절한 CSS 기능 버전은 단일 끈. ¹

당신은 content 선언에 여러 개의 문자열을 연결할 수 있지만, that is a feature of the content property하지 CSS에서 문자열.

---

¹_{url()는 하나의 문자열을 허용하기 때문에,이 하나의 attr()이browser support is nonexistent 제외하고 ... attr(image url) 등의 URL 값 also new to css-values-3로 사용될 수 있음을 의미한다.}