Ionic 2 - 背景图像清理器和 CSS 属性

Question

我有一个Ionic应用程序，可以显示一些卡片。卡片的背景是完整的图片。我有这个样式代码用于样式：

style="background-image: linear-gradient(rgba(31, 37, 51, 0.6), rgba(31, 37, 51, 0.6)), url('merl')"

但是现在，我需要动态地改变我的图片，所以我使用了：

首页.html

style="background-image: linear-gradient(rgba(31, 37, 51, 0.6), rgba(31, 37, 51, 0.6))" [style.background-image]="getBackground(event.picture)" 

首页

getBackground (image) {
  return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
}

问题是我的CSS过滤器没有显示，图片显示没有过滤器。我该怎么做才能显示CSS过滤器？

Answer 1

将过滤器添加到getBackground

类似的东西

getBackground (image) {
  let cssFilter = 'linear-gradient(rgba(31, 37, 51, 0.6), rgba(31, 37, 51, 0.6))';
  return this._sanitizer.bypassSecurityTrustStyle(`url(${image}), ${cssFilter}`);
}

有效设置

background-image: url(...), linear-gradient(rgba(31, 37, 51, 0.6), rgba(31, 37, 51, 0.6))

您当前的方式将是覆盖

background-image: linear-gradient(rgba(31, 37, 51, 0.6), rgba(31, 37, 51, 0.6)) 

跟

background-image: url(...)