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

}

相关推荐
weibkreuz3 分钟前
初始React@1
前端·react.js·前端框架
xiaoxue..7 分钟前
二叉树深度解析:从基础结构到实战应用
javascript·数据结构·面试
Coder_Boy_14 分钟前
前端和后端软件系统联调经典问题汇总
java·前端·驱动开发·微服务·状态模式
小皮虾18 分钟前
别再封装 Axios 了!用 RPC 像调用本地函数一样写接口(支持 Vue/React/Node)
前端·rpc·全栈
PieroPC21 分钟前
NiceGUI .classes() 完整列表教程
前端
月巴月巴白勺合鸟月半21 分钟前
一个医学编码的服务
服务器·前端·javascript
ylzc21 分钟前
vue-cli 替换为 rsbuild 遇到的问题
前端
JS_GGbond22 分钟前
给DOM元素加超能力:Vue自定义指令入门指南
前端·vue.js
T___T22 分钟前
用 Vite 搭建现代化 Vue 3 项目:从零到工程化入门
前端·vue.js
ycgg25 分钟前
深入理解 DOM 的 dispatchEvent API
前端