您可以使用大多数CSS函数执行插值，包括rgba()（请参阅此处的示例）。事实上，插值是自定义属性的主要功能之一。
但是对于url()不能这样做，因为url(var(--url))不是被解析为url(函数标记，后面是var(--url)，后面是)，而是一个无效的url()标记，因为var(--url)被视为URL本身，并且url()标记中的未加引号的URL不能包含括号，除非它们被转义。这意味着实际上不会发生替换，因为解析器不会在属性值中看到任何var()表达式-实际上，您的background声明是完全无效的。
如果你不明白，没关系。只需要知道，由于传统原因，您不能将var()插值与url()一起使用。
尽管问题中描述的问题与遗留url()令牌有关，但您也不能通过使用几个var()表达式构建URL令牌来实现这一点，以防您考虑尝试--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()来执行插值。

你不能用url插入css变量，但你可以这样做，将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>

这适用于大多数现代浏览器。

我在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
  );
}

显然，如果在**--var声明中使用带双引号的url（““）**，则该值将不起作用。

下面是在vue3中工作的解决方案

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

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

以下是Vuejs的官方文档。
下面（playground链接）是Vuejs和CSS自定义属性的解决方案：

<script setup>
import { ref } from "vue"
  const divImage = ref("url('https://download.unsplash.com/photo-1696075619091-dedae25b1f65')")
</script>

<template>
  <div>Hello</div>
</template>

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

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

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