离子图像填充颜色不变

Question

我正在使用 Ionic 3，并为此添加了一些 css 代码

示例 -

有人点击图片后需要更改填充颜色 .但它不适合我。谁能帮助我如何正确地做到这一点？

谢谢

css

clap {
  /*========================
   styles
    =======================*/
  .clap {
    position: relative;
    outline: 1px solid transparent;
    border-radius: 0;
    border: 0px solid #a750a9;
    top:-0.2rem;
    height: 0px; margin: 0px auto; margin-left: 2.3rem;
    background: none;   cursor: pointer;animation: pulse 2s infinite;

  }
  .clap:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 50%;
    width: 44px;
    height: 44px;
  }
  .clap:hover {
    cursor: pointer;
    border: 0px solid #a750a9;
    transition: border-color 0.3s ease-in;
  }
  .clap:hover:after {
    animation: shockwave 1s ease-in infinite;
  }
  .clap img {
    width: 20px;
    fill: none;
    stroke: #a750a9;
    stroke-width: 2px; margin-top: -1.5rem;
  }
  .clap img.checked {
    fill: #a750a9;
    stroke: #a750a9;
    stroke-width: 1px;
  }
}

html

<img   [class.checked]="clapIconChecked"  src="assets/imgs/clap.png">

.ts

     export class ClapComponent  {
     clapIconChecked = false;

   this.clapIconChecked = true;
      }
    }

Answer 1

你申请class的代码是正确的

<img [class.checked]="clapIconChecked" src="assets/imgs/clap.png">

Fill color 适用于svg，但不幸的是不适用于jpg 或png

您可以通过-webkit-filter 和filter 使用filters，这可以将图像更改为不同的shades。

Please check this example

/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<img src="https://ibcdn.imagesbazaar.com/img280/16449/220-SM696607.jpg" title="original">
<img  src="https://ibcdn.imagesbazaar.com/img280/16449/220-SM696607.jpg" title="saturate" class="saturate">
<img  src="https://ibcdn.imagesbazaar.com/img280/16449/220-SM696607.jpg" title="grayscale" class="grayscale">
<img  src="https://ibcdn.imagesbazaar.com/img280/16449/220-SM696607.jpg" title="contrast" class="contrast">

请运行上面的sn-p

Here is an example

我们甚至可以提供我们的custom colors，但我们需要提供一些css

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

更新：

根据操作要求使用span实现

Demo using span

Answer 2

我想你应该为此尝试 ngClass 属性。

<img [ngClass]="{'checked':clapIconChecked}"  src="assets/imgs/clap.png">

css/sass

.checked{
    fill: #a750a9;
    stroke: #a750a9;
    stroke-width: 1px;
}

如果发现任何错误，请告诉我。