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

Question

I am working on an Angular 2 project and trying to set both a background image and a opaque gradient using [ngStyle] These will eventually be variables pulled from JSON, or else I would just write them in my SCSS file. This is the code I am trying to use but it's not working. I can set either a background color or image using [ngStyle] , but not both.

<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'
}">

This code in my SCSS file gives me exactly the result I want.

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

Does anyone know if it is possible to specify both a background image and a opaque gradient using [ngStyle] ? Thanks!

Answer 1

The problem that you're having stems from the usage of single-quotes ( ' ) in the url() property. (Honestly, I'm surprised it doesn't throw an error.)

Removing them displays your desired result:

For Example:

<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

Unfortunately, the standard escape ( \\' ) does not seem to work in this context, but removing the single-quotes entirely is valid as well (assuming the value used for url() is URL-Encoded).