如何在Ionic 2中应用图像CSS3滤镜

时间:2017-09-01 22:27:54

标签: html image css3 filter ionic2

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

无论如何,我的问题是当我尝试在img标签中使用id或类来在一个图像上应用过滤器时,就不会发生任何变化。

这是我的代码

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

相反,我想在一些图像上应用效果。

2 个答案:

答案 0 :(得分:2)

在您的网页名称{}中使用您的Css。 例如: 它将仅适用于此页面

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

或尝试使用班级名称。

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

答案 1 :(得分:1)

style属性的内容存在问题:

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