url()을 사용하여 CSS 변수를 보간하는 방법이 있습니까?

Question

내 배경 URL을 사용자 정의 속성 (CSS 변수)에 저장하고 background 속성과 함께 사용하려고합니다. 그러나 url()의 매개 변수로 사용할 때 문자열을 보간하는 방법을 찾을 수 없습니다. 내가 어떤 사전없이 할 수있는 방법이 있다면이 쉽게 보간 기능을 사용 말대꾸 이하에서 수행 할 수 있지만, 내가 궁금 것을 알고

:root { 
    --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416"; 
} 

body { 
    background: url(var(--url)); 
} 

: 여기

내 샘플 코드 프로세서.

Answer 1

rgba()을 포함한 대부분의 CSS 기능으로 보간을 수행 할 수 있습니다 (예제는 here 참조). 실제로 보간은 사용자 지정 속성의 주요 기능 중 하나입니다.

하지만 당신은 url(var(--url))이 ) 다음 var(--url) 다음에 url( 기능 토큰,하지만 var(--url)가 URL 자체로 취급되고 있기 때문에 유효 하나의 url() 토큰으로하지 구문 분석으로, url()이 작업을 수행하고, 수 url() 토큰에 인용되지 않은 URL은 이스케이프 처리되지 않는 한 괄호를 포함 할 수 없습니다. 이는 구문 분석기가 속성 값에 var() 표현식을 전혀 볼 수 없기 때문에 대체가 실제로 발생하지 않음을 의미합니다. 실제로는 background 선언은 완전히 유효하지 않습니다.

아무 것도 이해하지 못했다면 괜찮습니다. 레거시 이유로 인해으로 var() 보간을 사용할 수 없다는 것을 알고 있습니다.

질문에 묘사 된 문제는 기존 url() 토큰 관련이있다하더라도, 당신이 경우에 당신이 --uo: url(; --uc:); 또는 --uo: url("; --uc: "); 및 background: var(--uo) var(--url) var(--uc); 같은 것을하려고 생각하고, var() 표현 중 몇에서 URL 토큰을 구축하여이 작업을 수행 할 수 없습니다 . 이는 custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens)입니다. 보간을 수행하는 대신 var()의 자바 스크립트를 사용

:root { 
    --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416"); 
} 

body { 
    background: var(--url); 
} 

또는 : 사용자 정의 속성에 URL을 지정하려면

, 당신은 전체 url() 표현을 쓸 필요하고, 대신 그 전체 표현을 .