Question

有没有办法使窗体控件透明？实际上，我的输入或按钮都不符合我的CSS样式。我想使离子输入透明，并更改离子按钮上的颜色，但它没有粘附到我的.css

上

我也希望背景图片也填写输入字段，并将超链接文本按钮设置为白色。

ion-content {
      --background: #fff url("../../../assets/img/login-image.jpg") no-repeat center center / cover;
     }
form {
  margin-bottom: 32px;
  ion-button {
    margin-top: 20px !important;
  }
}

p {
  font-size: 0.8em;
  color: #d2d2d2;
}

ion-label {
  margin-left: 5px;
}

ion-input {
  padding: 5px;
  background-color: transparent !important;
}

ion-content {
  ion-button{
  .linkbuttons {
    color: white !important;
   }
  }
}

<ion-content class="background">
<form [formGroup]="loginForm">
  <ion-item>
    <ion-label position="stacked">Email</ion-label>
    <ion-input
      formControlName="email"
      type="email"
      placeholder="Your email address"
      [class.invalid]="!loginForm.controls['email'].valid &&
      loginForm.controls['email'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['email'].valid &&
       loginForm.controls['email'].touched"
  >
    <ion-label>Please enter a valid email address.</ion-label>
  </ion-item>

  <ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input
      formControlName="password"
      type="password"
      placeholder="Your password"
      [class.invalid]="!loginForm.controls['password'].valid&& loginForm.controls['password'].touched"
    >
    </ion-input>
  </ion-item>
  <ion-item
    class="error-message"
    *ngIf="!loginForm.controls['password'].valid
      && loginForm.controls['password'].touched">
    <ion-label>Your password needs more than 6 characters.</ion-label>
  </ion-item>

  <ion-button (click)="loginUser(loginForm)" expand="block" [disabled]="!loginForm.valid">
    Log In
  </ion-button>
</form>

  <ion-button expand="block" fill="clear" class="linkbuttons" routerLink="/signup">
    Create a new account
  </ion-button>

  <ion-button expand="block" fill="clear" class="linkbuttons" routerLink="/reset-password">
    I forgot my password
  </ion-button>
</ion-content>

Answer 1

尝试使用background-color: transparent而不是opacity: 0.5来代替^^

Answer 2

您可以使用自定义变量ion-input来更改--background的背景。

ion-input{
  --background: transparent;
}

https://ionicframework.com/docs/api/input#css-custom-properties

ion-button的工作方式相同：

ion-button{   
  --background: ...; 
}

https://ionicframework.com/docs/api/button

Answer 3

离子5

我已经在color="transparent"上使用ion-item了

  <ion-item color="transparent">
       

   </ion-item>

无法使窗体控件透明

3 个答案: