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

}

相关推荐
蜡台16 分钟前
修改Uniapp input 组件不刷新视图问题
前端·uni-app·input
逸铭20 分钟前
Day 8:Preload 是什么?——在别人的网页里打黑工还要合规
前端·客户端
张元清22 分钟前
React useLocalStorage Hook:SSR 安全的持久化状态(2026)
javascript·react.js
甜味弥漫25 分钟前
React Router:从单页应用到前端路由
javascript·node.js
柒和远方28 分钟前
Worker Readiness:为什么 `/health` 不能证明后台任务能跑
前端·后端·架构
lkshop29 分钟前
Next.js 网站 SEO 优化:从 SSR、Sitemap 到结构化数据
开发语言·javascript·ecmascript
吃糖的小孩30 分钟前
Web Owner Console 还没写前端,我先给它设计 read model
前端
析数塔31 分钟前
2026前端框架深度解析:React Compiler、Angular Zoneless、Vue 3.5重写游戏规则
前端·vue.js·react.js
嘟嘟071731 分钟前
Node.js spawn 实现迷你 Cursor 自动化终端|子进程完整解析
前端·后端·面试