Question

我想将橙色背景更改为绿色，但是对于某些动画，例如，当它为橙色时，它将变为绿色。

如果您可以查看我整理的两张gif文件，就会明白我的意思。

当前情况如何 -> GIF

我想如何成为他们 -> GIF

HOME.HTML

<ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

Answer 1

您需要为每个离子卡更改背景色。

 <ion-content >
  <div  style="background-color: #f87f0e; padding: 10px;">
    <ion-slides pager>
      <ion-slide >
        <ion-card style="background-color: red; border-radius: 15px;margin-bottom: 35px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE PERSONAL</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
      <ion-slide>
        <ion-card style="background-color: green; border-radius: 15px">
          <ion-card-content style="font-family: sans-serif;">
            <ion-row>
              <ion-col col-12>
                <P style="color: #9e9e9e;float: left;font-size: 15px">BALANCE BUSINESS</P>
              </ion-col>
              <ion-col col-12>
                <H2 style="float: left;font-size: 20px">4.235632 <small>MIC</small></H2>  
              </ion-col>
            </ion-row>
          </ion-card-content>
        </ion-card>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>

更改颜色背景幻灯片白色渐变IONIC 3

1 个答案: