开始着手做登陆界面,学会了几个知识:
1、css要使模块透明化可以用opacity:0.4;
2、当我们想让背景透明化但是不让其上的素材改变时,可以使用rgba(r,g,b,opacity)。比如做一个透明的登陆框效果。
<div class="Login-form">
<form action="">
<input type="text" name="user" placeholder="学号/工号" required="required" class="input-txt">
<br />
<input type="password" name="password" placeholder="密码" required="required" class="input-txt">
<br>
</form>
</div>
.input-txt{
width: 100%;
padding: 20px 10px;
background: rgba(255,255,255,0.2);
border: none;
font-size: 1em;
color: #000000;
border-bottom: 1px dotted rgba(250, 250, 250, 0.4);
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-transition: background-color 0.5s ease-in-out;
-o-transition: background-color 0.5s ease-in-out;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
}
.input-txt:-moz-placeholder {
color: #000000;
}
.input-txt:-ms-input-placeholder {
color: #000000;
}
.input-txt::-webkit-input-placeholder {
color: #000000;
}
.input-txt:focus {
background-color: rgba(214,254,244,0.4);
}