如何处理/使用带有css变量的路径图像?角度



我收到一个配置JSON,其中包含我必须在CSS中使用的图像的颜色和路径,我在html中正确设置了变量,结果类似于此:

<html lang="en" style="
--c-logo-square:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/temp%20belike%20small.png;
--c-background-image:https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png; 
--c-primary:green; 
--c-secondary:purple;">

我可以正确使用颜色变量,但我不知道如何使用图像路径作为背景。

// Works
.my-html-component {
color: var(--c-primary);
}
// Error
logo {
background: url(var(--c-background-image));
}

在使用Angular和SCSS时,我知道我可以使用一些功能来做我需要的事情,但我不知道如何做到

与其在属性中定义url,不如将其定义为变量的一部分。别忘了添加:root。

:root {
--c-background-image:url(https://linkener-design-tokens.s3.eu-west-1.amazonaws.com/localhost/mainBg.png); 
}

.logo {
background: var(--c-background-image);
width:500px;
height:500px;
}
<div class="logo"></div>

最新更新