我有一个登录表单,我想在输入字段下放置一个颜色渐变。但是以某种方式输入的背景不是正常运行,而是以某种方式模糊和放大。我试图制作离子输入{ 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 - 如何使输入不影响背景?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59432636/