CSS 변수를 `url()` 함수 내에서 직접 사용할 수 없는 이유는 무엇입니까?

url()을 사용하여 CSS 변수 보간

사용자 정의 속성(CSS 변수)은 스타일 값을 저장하고 재사용하는 효과적인 방법을 제공합니다. 그러나 사용자는 url() 함수 내에서 이러한 변수를 보간하려고 할 때 문제에 직면했습니다.

왜 CSS 변수를 url()로 보간할 수 없습니까?

rgba()와 같은 CSS 함수의 보간 기능에도 불구하고 url()에는 주목할만한 예외가 있습니다. 이 문제는 파서가 url(var(--url))을 함수 호출이 아닌 단일 유효하지 않은 url() 토큰으로 해석하기 때문에 발생합니다. 이렇게 하면 var() 표현식이 평가되지 않고 잘못된 배경 선언이 발생하게 됩니다.

기존 이유

url()에서 변수를 보간할 수 없는 것이 원인일 수 있습니다. 유산 이유. url() 토큰의 구문 분석은 이전 CSS 버전과의 호환성을 유지하기 위해 그대로 유지되었습니다.

대체 솔루션

url()에서는 변수 보간이 불가능하지만 유사한 효과를 얻기 위한 대체 접근 방식은 다음과 같습니다.

1. 정의 사용자 정의 속성의 URL 표현식: url() 함수 내에서 변수를 삽입하는 대신 전체 URL을 사용자 정의 속성으로 지정합니다. 예:

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

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

2. JavaScript 사용: JavaScript를 사용하면 CSS 변수에서 url() 표현식을 동적으로 생성하고 background 속성을 사용하여 적용할 수 있습니다.

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