我收到一个配置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>