HTML登录页面透明样式

它朝若是

于 2024-01-12 10:42:39 发布

阅读量1.3k

点赞数 24

分类专栏： C# 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weiwei_y/article/details/135546637

版权

C# 专栏收录该内容

49 篇文章 3 订阅

订阅专栏

html

<body>
<form>
<h4 style="text-align:center">登录中心</h4>
<hr />
<br />
<div class="row mb-5">
<label class="col-sm-2 col-form-label">名称：</label>
<div class="col-sm-10">
<input class="form-control" type="text">
</div>
</div>
<div class="row mb-5">
<label class="col-sm-2 col-form-label">密码：</label>
<div class="col-sm-10">
<input class="form-control" type="text">
</div>
</div>
<div class="row">
<input type="submit" value="登录" class="btn btn-success"style="width: 200px; height: 35px; margin: auto; background-color: #3864b1;" />
</div>

<div class="row">
<a style="text-align:right;" href="/Login/Register">注册用户</a>
</div>

</form>
</body>

style样式

body {
height: 100%;
background-image: url("/Content/img/bg1.jpg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
}
form {
border-radius: 8px;//圆角
width: 465px;
height: 400px;
position: absolute;
padding:25px;
top: 30%;
bottom: 30%;
left: 40%;
background: rgb(128, 128, 128,.2);
/*背景颜色灰色，透明度为0.8*/
box-sizing:border-box;
/*box-sizing设置盒子模型的解析模式为怪异盒模型，24 将border和padding划归到width范围内*/
box-shadow: 0px 15px 25px rgba(0,0,0,.5);
/*边框阴影水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
}