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 (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(...)

带

fastlane

Ionic 2 - 背景图像清洁剂和CSS属性

1 个答案: