CSS 변수를 `url()` 함수 내에서 사용할 수 있나요?

CSS 변수를 url()로 보간할 수 있나요?

CSS 변수가 널리 사용됨에도 불구하고 보간에는 여전히 한계가 있습니다. url() 함수 내에 있습니다. 이러한 제한은 url() 토큰의 기존 특성으로 인해 발생합니다.

최신 CSS에서는 사용자 정의 속성 보간이 기본 기능입니다. rgba()와 같은 다양한 함수에 동적 값을 삽입할 수 있습니다. 그러나 url() 함수는 이 규칙의 예외입니다.

url(var(--url))을 사용할 때 파서는 이를 여러 토큰의 조합이 아닌 단일 url() 토큰으로 해석합니다. url() 함수 토큰 및 변수 표현식. 결과적으로 변수는 URL 자체로 처리되어 보간이 유효하지 않게 렌더링됩니다.

이 문제를 피하려면 url()의 여러 변수 표현식에서 URL 토큰을 구성하지 마십시오. 여기에는 --uo: url(; --uc: ); 및 배경: var(--uo) var(--url) var(--uc);. 사용자 정의 속성은 일치하지 않는 문자열 구분 기호나 url() 토큰의 일부를 포함할 수 없습니다.

배경의 경우 해결책은 사용자 정의 속성 내에서 전체 url() 표현식을 지정하고 이를 직접 대체하는 것입니다.

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

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

또는 var() 대신 JavaScript를 활용하여 보간을 수행할 수도 있습니다.

위 내용은 CSS 변수를 `url()` 함수 내에서 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!