Ionic 2 - 背景图像消毒剂和 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过滤器没有显示，图片显示没有过滤器。 如何显示 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(...)