Angular 2 在 [ngStyle] 中设置背景图像和颜色答案

【问题标题】：Angular 2 setting background image and color in [ngStyle]Angular 2 在 [ngStyle] 中设置背景图像和颜色
【发布时间】：2017-08-30 08:50:37
【问题描述】：

我正在开发一个 Angular 2 项目，并尝试使用 [ngStyle] 设置背景图像和不透明渐变，这些最终将是从 JSON 中提取的变量，否则我会将它们写在我的 SCSS 文件中。这是我正在尝试使用的代码，但它不起作用。我可以使用[ngStyle] 设置背景颜色或图像，但不能同时设置。

<header [ngStyle]="{
    'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
     rgba(119, 233, 207, 0.5)), 
     url('example.com/image.png') center center / cover no-repeat'
}">

我的 SCSS 文件中的这段代码给出了我想要的结果。

header {        
    background: linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
    rgba(119, 233, 207, 0.5)), 
    url('example.com/img.png');
}

有谁知道是否可以使用[ngStyle] 同时指定背景图像和不透明渐变？谢谢！

【问题讨论】：

标签： javascript css angular

【解决方案1】：

您遇到的问题源于在 url() 属性中使用单引号 (')。 （老实说，我很惊讶它没有抛出错误。）

删除它们会显示您想要的结果：

例如：

<header [ngStyle]="{
  'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
                rgba(119, 233, 207, 0.5)), 
                url(example.com/img.png) center center / cover no-repeat'}">

Working Plnkr

不幸的是，标准转义 (\') 在这种情况下似乎不起作用，但完全删除单引号也是有效的（假设用于 url() 的值是 URL 编码的）。

【讨论】：