Есть ли способ интерполировать CSS-переменные с помощью url()?

Question

Я хочу хранить свои фоновые URL-адреса в пользовательских свойствах (переменные CSS) и использовать их со свойством background. Тем не менее, я не мог найти способ интерполировать строку при использовании ее в качестве параметра в url(),

Вот мой пример кода:

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

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

Я знаю, что это легко сделать в Sass или LESS, используя функцию интерполяции, но мне интересно, есть ли способ сделать это без какого-либо препроцессора.

Answer 1

Вы можете выполнить интерполяцию с большинством функций 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() выполнить интерполяцию.

Answer 2

Вы не можете интерполировать переменные css с URL-адресом, но вы можете реализовать функцию URL-адреса как часть вашей переменной следующим образом:

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

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

в HTML может быть:

      <div class="css_class_setting_background" style=" --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");"> </div>

Это работает в большинстве современных браузеров.

Answer 3

вот решение, которое работает в vue3

      <script setup>
const backImage = ref("url(/img/imImage.webp)")
</script>

<style>
div {
  background-image: v-bind(backImage );
}
</style>

Answer 4

У меня была та же проблема в проекте с Cordova, поэтому я использовал:

```
header{
  --bg-header: url(../img/header_home.png) left center/cover no-repeat;
  background: var(--bg-header,
      url("../img/header_home.png") left center/cover no-repeat
  );
}
```

Соответственно, если вы используете url("") с двойными кавычками в объявлении --var, значение не будет работать.