css变量实现接口获取背景图地址的变化（Vue为例）

想要在CSS中使用JS变量

步骤：

1. 在行内的style属性中定义CSS变量

<div class="box" :style="{'--background':banner}"></div>

2. 赋值JS变量

// js
data(){
	return {
		banner:'url(../img/home_bg.png)',
	}
}

3. 在CSS中使用变量

.box {
	background: var(--background)
}

• 带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用
• CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来

这意味着，同一个自定义属性名可以被多次赋值

语法
定义：

--<name> : <declaration-value>

使用：

属性名: var(--<name>)