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

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

1 个答案: