Angular 2+: 将 NgStyle 与函数一起使用时如何重载背景图像

Question

我正在 Angular 8 中创建一个不透明度滑块。

我想将背景设置为棋盘格 CSS 图案。我正在函数中创建样式，因为我正在感应滑块的宽度并调整跳棋的大小以及允许通过输入自定义颜色。

background-image 需要重载以考虑 webkit/moz 浏览器前缀。尝试这样做会导致错误，因为 JSON 对象具有重复的背景图像键。

这段代码在一个 Sass 文件中工作，变量是硬编码的，当适当的背景图像规则被注释掉时，它也可以在 webkit 和 moz 浏览器中工作。

我试过了（没有任何运气）：

在两个不同的函数中使用背景图像规则调用 [NgStyle] 两次。
使用函数调用 [NgStyle]，并使用 [style.background-image] 和 moz 规则
骆驼套其中一个背景图像键，使其在 JSON

有什么方法可以实现我的目标，即拥有这个动态创建的背景，同时支持基于 moz 和 webkit 的浏览器？

public setBackground() {
    let checkerSize: number = this.getCheckerSizeInPixels();
    return {

      "background-image": `-moz-linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          -moz-linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          -moz-linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
                          -moz-linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,

      "background-image":
        `-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, ${this.backgroundColor.toRgbaString()}), color-stop(.25, transparent)),
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()})),
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, ${this.backgroundColor.toRgbaString()}))`,

      "-moz-background-size": `${checkerSize}px ${checkerSize}px`,
      "background-size": `${checkerSize}px ${checkerSize}px`,
      "-webkit-background-size": `${checkerSize}px ${checkerSize}px`,

      "background-position":`0 0, ${checkerSize/2}px 0, ${checkerSize/2}px -${checkerSize/2}px, 0rem ${checkerSize/2}px`
    };
  }

.opacity-selector {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;

  // background-image:
  //   -moz-linear-gradient(45deg, lightgray 25%, transparent 25%),
  //   -moz-linear-gradient(-45deg, lightgray 25%, transparent 25%),
  //   -moz-linear-gradient(45deg, transparent 75%, lightgray 75%),
  //   -moz-linear-gradient(-45deg, transparent 75%, lightgray 75%);
  // background-image:
  //   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, lightgray), color-stop(.25, transparent)),
  //   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, lightgray), color-stop(.25, transparent)),
  //   -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, lightgray)),
  //   -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, lightgray));

  // -moz-background-size: 1rem 1rem;
  // background-size: 1rem 1rem;
  // -webkit-background-size: 1rem 1rem;

  // background-position:0 0, .5rem 0, .5rem -.5rem, 0rem .5rem;
}

<div class="opacity-selector"  [ngStyle]="setBackground()"></div>

Answer 1

不再需要浏览器前缀。这需要对代码进行以下更改才能使其像使用前缀一样工作：

public setBackground() {
    let checkerSize: number = this.getCheckerSizeInPixels();
    return {
      "background-image": `linear-gradient(45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(-45deg, ${this.backgroundColor.toRgbaString()} 25%, transparent 25%),
                          linear-gradient(45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%),
                          linear-gradient(-45deg, transparent 75%, ${this.backgroundColor.toRgbaString()} 75%)`,

      "background-size": `${checkerSize}px ${checkerSize}px`,

      "background-position":`0 0, 0px ${checkerSize/2}px, ${checkerSize/2}px -${checkerSize/2}px, -${checkerSize/2}px 0px`
    };
}

背景位置的变化来自这个post：

此解决方案解决了我的特定用例，但没有回答更广泛的问题：如果仍然需要浏览器前缀，将如何实现？如果有人有解决方案 - 我仍然有兴趣听到它，请 post 它。

Angular 2+: 将 NgStyle 与函数一起使用时如何重载背景图像

Angular 2+: how to overload background-image when using NgStyle with a function

css

sass

background-image

angular