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

Question

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

我想将背景设置为棋盘CSS模式。我在函数中创建样式是因为我要检测滑块的宽度并调整检查器的大小，并允许通过输入自定义颜色。

背景图片需要重载以说明webkit / moz浏览器前缀。尝试执行此操作会导致错误，因为JSON对象具有重复的背景图像键。

此代码在带有变量硬编码的Sass文件中起作用，并且当注释了适当的背景图像规则时，它也可以在webkit和moz浏览器中使用。

我已经尝试过（没有任何运气）：

1. 使用两个不同函数的背景图像规则两次调用[NgStyle]。

2. 使用该函数调用[NgStyle]，并仅使用[moz规则使用[style.background-image]

3. 使用驼峰式背景图片键之一使其对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

如他在douchey的非回答文章中提到的那样-不再需要浏览器前缀。这需要对代码进行以下更改，以使其与使用前缀的代码一起工作：

  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`
};

}