如何让输入不影响背景？答案

【问题标题】：How to make the input not affecting the background?如何让输入不影响背景？
【发布时间】：2019-12-23 02:03:39
【问题描述】：

我有一个登录表单，我想在输入字段下放置一个颜色渐变。但不知何故，输入中的背景表现不正常，而是以某种方式模糊和放大。我试图使离子输入{ opacity: O%; } 但这不起作用。

这是问题的代码和图片：

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 css ionic-framework sass

【解决方案1】：

设置背景颜色：输入透明。

【讨论】：