为背景图像速记正确格式化 ng-style答案

【问题标题】：Formatting ng-style correctly for background-image shorthand为背景图像速记正确格式化 ng-style
【发布时间】：2019-10-27 13:58:54
【问题描述】：

下面这行有问题。我的应用程序中正确显示了我的高度和宽度。如果我包含+ character.offsetX + 'px' + character.offsetY + 'px'，则不会出现背景图像样式。

Character.offsetX 和 offsetY 是从字符对象提供的硬编码数字。

我在网上找到的示例非常简单，没有显示如何使用background-image 的简写版本来设置background-position

<li *ngFor="let character of this.characterList" [ngStyle]= "{'height':'50px', 'width':'50px', 'background-image':'url(' + character.fullImagePath + ')' + character.offsetX + 'px' + character.offsetY + 'px' }"

【问题讨论】：

标签： html css angular sprite-sheet ng-style

【解决方案1】：

background-image 不允许设置其他 background-* 属性 - 您需要使用 background 简写来代替：

<li *ngFor="let character of this.characterList" [ngStyle]= "{'height':'50px', 'width':'50px', 'background':'url(' + character.fullImagePath + ') ' + character.offsetX + 'px ' + character.offsetY + 'px' }"

【讨论】：

不要忘记每个character.offset...之前的空格。