我有一个登录表单,我想在输入字段下放置一个颜色渐变。但是以某种方式输入的背景不是正常运行,而是以某种方式模糊和放大。我试图制作离子输入{ opacity: O%; },但是没有用。

这是代码和问题的图片:
html - 如何使输入不影响背景?-LMLPHP

html

<ion-content padding>

<h2> Login </h2>

<form \[formGroup\]="loginForm">

   <ion-item class="input-item">
   <!--  <ion-label position="floating"> <ion-icon name="person"></ion-icon> Username or Email</ion-label> -->
     <ion-input
     type="text"
     placeholder="Username"
     formControlName="username"
     clearInput
     inputmode="text"
      ></ion-input>
   </ion-item>



   <ion-item class="input-item">
    <!-- <ion-label position="floating"> <ion-icon name="lock"></ion-icon> Password</ion-label> -->
    <app-show-hide-password>
     <ion-input
     type="password" placeholder="Password" formControlName="password"
      ></ion-input>
   </app-show-hide-password>
    </ion-item>



   <ion-button
      type="submit"
      expand="block"
      shape="round"
      color="primary"
      \[disabled\]="!loginForm.valid"
    > Login </ion-button>

  </form>

</ion-content>


的CSS

ion-content{
   --ion-background-color: linear-gradient(to top right, #2d4caf 0, #ce38a1 100%);
   opacity: 100%;
 }

 ion-input{
  background: none;
  opacity: 1;
 }


h2{
   color: black;
   font-size: 20px;
   text-align: center !important;
   margin-top: 20%;
   margin-bottom: 15%;
   }

最佳答案

设置背景色:输入透明。

关于html - 如何使输入不影响背景?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59432636/

10-12 03:10
查看更多