HTML登录页面透明样式

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*/

}

相关推荐
容智信息2 分钟前
AI Agent(智能体)的输出格式应该从 Markdown 转向 HTML吗?
前端·人工智能·rust·编辑器·html·prompt
_风满楼4 分钟前
TDD 进阶:换个角度看会议室预约
前端·javascript·github
Amy_yang4 分钟前
uni-app 安卓端纯前端预览 DOCX 的实现思路
前端·vue.js
x_y_6 分钟前
分享一个自己总结的前端开发skill~ requirement-to-delivery
前端·ai编程
梨子同志7 分钟前
CSS Grid
前端·css
子兮曰8 分钟前
SuperSplat 深度解析:7.6K Stars 的浏览器端 3D 高斯泼溅编辑器 — 在 Web 上编辑现实
前端·javascript·webgl
小徐_233316 分钟前
Wot UI v1 升级 v2?这份迁移指南帮你少踩坑!
前端·微信小程序·uni-app
xiangxiongfly91518 分钟前
Vue3 动态加载静态资源
前端·javascript·vue.js
子兮曰19 分钟前
whisper.cpp 深度解析:从边缘设备到实时语音识别
前端·c++·后端
子兮曰23 分钟前
Ruflo 深度解析:49K Stars 的 AI Agent 编排平台 — 给 Claude Code 装上分布式神经系统
前端·后端·ai编程