Angular 5中如何为图片添加渐变背景？

你遇到的这个问题我在Angular 5开发时也碰到过：想给动态绑定的背景图片加上渐变层，但直接用[style.background-image]尝试组合linear-gradient的时候，总是报错提示linear-gradient方法不存在。当时我的初始代码和你的差不多：

<div class="event-home-img" [style.background-image]="'url(' + event?.eventImage + ')" ></div>

后来摸索了一阵，发现用[ngStyle]指令就能完美解决这个问题——把渐变和背景图作为一个完整的background-image属性值来设置，Angular就能正确解析CSS的渐变语法了。最终的可行代码是这样的：

<div class="event-home-img" [ngStyle]="{'background-image': 'linear-gradient(transparent 80%, #151825), url(' + event?.eventImage + ')'}"> </div>

这里的核心是，background-image可以同时接受渐变和图片两个值，渐变会作为上层图层覆盖在背景图上，从而实现渐变遮罩的效果。另外要注意字符串拼接的正确性，别漏掉了引号和括号，不然也会出问题。

内容的提问来源于stack exchange，提问作者Ciprian