Не удается сделать элементы управления прозрачными

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

Вы можете изменить фон 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 2

Вместо background-color: transparent, попробуйте opacity: 0.5 вместо ^^