html - Ionic 2 - 背景图像 sanitizer 和 CSS 属性

Question

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

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

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

home.html

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

home.ts

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

问题是我的css filter没有显示出来，图片显示没有filter。 我该怎么做才能显示 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(...)