Angular 2+:如何在使用带有函数的NgStyle时重载背景图像

Question

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

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

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

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

我试过(没有任何运气(：

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

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

3. Camel将其中一个背景图像键封装起来，使其成为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`
};
}

背景位置的变化来自这篇文章：CSS渐变棋盘图案

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