如何在 Ionic 2 中应用图像 CSS3 过滤器答案

【问题标题】：How to apply image CSS3 filters in Ionic 2如何在 Ionic 2 中应用图像 CSS3 过滤器
【发布时间】：2018-02-11 00:25:32
【问题描述】：

我正在尝试通过 CSS3 过滤器提高某些图像的分辨率以自动对其进行编辑，您可以在此链接中找到很多过滤器 https://www.w3schools.com/cssref/css3_pr_filter.asp

无论如何，我的问题是当我尝试在 img 标签中使用 id 或 class 将过滤器应用到一张图像上时，没有发生任何变化。

这是我的代码示例

<img src="{{noteImg.url}}" style="height:135px !important; margin=0px -webkit-filter: contrast(200%); filter: contrast(200%);"  #imageToView (click)="viewImg(imageToView)"/>

相反，我想将效果应用于某些图像。

【问题讨论】：

添加一个工作示例，你的语法/名称/属性可能有问题...
@Dekel 你可以看到我的 img 标签代码 ..
与该图像特别相关的 CSS 在哪里？
@Dekel 我使用了风格。我认为它与 CSS 相同
检查我的答案

标签： html image css filter ionic2

【解决方案1】：

在您的页面名称中使用您的 Css{}。例如：它将仅应用于此 metion 页面

page-yourPagename {
 img {
   -webkit-filter: contrast(200%); /* Safari */
   filter: contrast(200%);
 }
}

或者尝试使用类名。

page-yourPagename {
 .image {
   -webkit-filter: contrast(200%); /* Safari */
   filter: contrast(200%);
 }
}

【讨论】：

我用我的代码编辑了这个问题。有什么错误吗？
@AliH 我没有得到margin=0px，据我所知，它应该是带有分号的margin:0xp;。否则你的代码对我来说很好。

【解决方案2】：

style 属性的内容有问题：

<img src="{{noteImg.url}}" style="height:135px !important; margin: 0; -webkit-filter: contrast(200%); filter: contrast(200%);"  #imageToView (click)="viewImg(imageToView)"/>

【讨论】：