如何使用CSS root变量修改background-image背景图片

问题原因 #

你当前代码不生效是因为var()和url()的嵌套写法不符合CSS语法规则，和是否用root变量无关，CSS原生变量完全可以实现背景图切换，不需要借助JavaScript。

正确实现方案 #

方案1（兼容性最优，推荐使用） #

定义CSS变量时直接将url()包含在变量值内：

/* 全局root变量定义 */
:root {
  --image-email: url('pictures/email_light.png');
}

/* 元素样式 */
.image_email {
    height: 105px;
    width: 105px;
    background-image: var(--image-email);
}

后续要修改背景图时，直接修改:root下--image-email的变量值即可全局生效。

方案2（路径单独存为变量） #

如果需要把路径单独作为字符串存在变量里，需要给路径加引号后使用：

:root {
  --image-email: 'pictures/email_light.png';
}

.image_email {
    height: 105px;
    width: 105px;
    background-image: url(var(--image-email));
}

该写法在部分老旧版本浏览器中存在兼容问题，优先选择方案1即可。

内容的提问来源于stack exchange，提问作者holyblast