css - 在 Angular 中更新 CSS 变量

Question

我想在我的 Angular 应用程序中使用 Bennett Feely "Image-effects" .

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

.photo-border-effect {
  background-image: 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_Lighthouse_%28April_2012%29.jpg);
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

[class$=-effect] img {
    vertical-align: top !important;
    margin: 0 !important;
    opacity: 0 !important;
}

/* CodePen Styles */
body {
    display: flex;
    height: 100vh;
}
div {
    margin: auto;
}

<div class="photo-border-effect">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/Point_Reyes_Lighthouse_%28April_2012%29.jpg/593px-Point_Reyes_Lighthouse_%28April_2012%29.jpg">
</div>

但我必须手动更改 CSS 中的 url，这对我的应用来说不是很方便。我知道我可以使用 CSS variables但我找不到直接从我的 .ts 更新它的方法。

在 Angular 中更新 CSS 变量的正确方法是什么？

Mihir Dave 的响应可能有效，但我在同一类中遇到了具有不同 background-image 的情况:

.flannel-effect {
  background-image: url(photo.jpg);
  background-size: cover;
  background-position: center;
}

@supports (background-blend-mode: overlay) {
  .flannel-effect {
    background-image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
  }
}

Answer 1

我找到了一种快速简便的方法。

我使用 CSS 变量并使用 DomSanitizer 从我的 .ts 设置值。

这是一个Stackblitz实现此解决方案。