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

URL 표현식 내에서 CSS 변수를 보간할 수 있나요?

CSS에서 사용자 정의 속성(CSS 변수라고도 함)은 편리한 방법을 제공합니다. 프로그래밍 방식으로 값을 저장하고 수정합니다. 그러나 사용자가 배경 속성과 같이 URL 함수 내에서 변수 값을 보간하려고 시도할 때 제한이 발생할 수 있습니다.

예:

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

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

안타깝게도 이러한 보간은 레거시 이유로 인해 url() 함수가 작동하지 않습니다. CSS 파서는 url(var(--url))을 별도의 토큰이 아닌 하나의 유효하지 않은 url() 토큰으로 처리합니다.

rgba()와 같은 CSS 함수에 보간법을 일반적으로 사용할 수 있음에도 불구하고 허용되지 않습니다. url()은 잠재적인 모호성과 구문 분석 문제로 인해 발생합니다.

따라서 사용자 정의 속성 내에서 전체 URL 문자열을 명시적으로 정의하는 것은 필요:

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

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

또는 JavaScript를 사용하여 원하는 보간을 수행할 수 있습니다.

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