以角度更新CSS变量

我想在我的角度应用程序中使用Bennett Feely

例如，这是“照片边框效果”：

。照片边框效果{
背景图片：url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg），url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_灯塔（2012年4月28日29.jpg）；
背景位置：中心；
背景大小：60%，20%；
背景重复：不重复，重复；
}
[class$=-效果]img{
垂直对齐：顶部！重要；
边距：0！重要；
不透明度：0！重要；
}
/*代码笔样式*/
身体{
显示器：flex；
高度：100vh；
}
div{
保证金：自动；
}

---

您可以从CSS中删除背景图像，并使用如下方式从模板中传递背景图像

<div [style.background-image]="'url('+YourUrlFromVariable+')'"></div>

---

我找到了一个简单快捷的方法

我使用CSS变量并使用

DomSanitizer

从my.ts设置值

---

下面是一个实现此解决方案的示例。

但是一些效果需要

背景图像：url（photo.jpg）、url（photo.jpg）@TotoBriac请检查更新的答案。可能有效，但我面临其他问题，请检查更新的问题
<div [style.background-image]="getBackGroudImage()"></div>

getHeroes(): string {
    // add cases here based on which you can return different strings to background urls
    return 'url('+YourUrlFromVariable+'), url(photo.jpg);';
}