Установить фоновое изображение с использованием пользовательских переменных CSS [duplicate]

Вы можете выполнить интерполяцию с большинством функций CSS, включая rgba() (см. пример здесь ). Фактически, интерполяция является одной из основных особенностей пользовательских свойств.

Но вы не можете сделать это с помощью url(), поскольку url(var(--url)) анализируется не как маркер функции url(, а затем var(--url) за которым следует ), но единственный url() токен, который недействителен, поскольку var(--url) обрабатывается как сам URL, а некотируемые URL-адреса в токенах url() не могут содержать круглые скобки, если они не экранированы. Это означает, что замена никогда не возникает, потому что синтаксический анализатор никогда не видит никаких выражений var() в значении свойства - действительно, ваше объявление background полностью недействительно.

Если вы ничего не поняли , хорошо. Просто знайте, что вы не можете использовать интерполяцию var() с url() из-за унаследованных причин.

Несмотря на то, что проблема, указанная в вопросе, связана с устаревшим токеном url(), вы не можете сделать этого, создав Идентификаторы URL-адресов из нескольких var() выражений либо, если вы подумываете попробовать что-то вроде --uo: url(; --uc: ); или --uo: url("; --uc: "); и background: var(--uo) var(--url) var(--uc);. Это связано с тем, что пользовательские свойства не могут содержать непревзойденные разделители строк или части токенов url() (называемые плохими URL-адресами) .

Если вы хотите указать URL-адрес в настраиваемом свойстве, вам нужно записать все выражение url() и заменить это целое выражение:

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

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

Или, чтобы выполнить интерполяцию, используйте JavaScript вместо var().