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

Question

我正在做一个 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] 指定背景图像和不透明渐变？谢谢!

Answer 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 编码的)。