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

}

相关推荐
掘金安东尼7 小时前
纯 CSS 实现弹性文字效果
前端·css
牛奶8 小时前
Vue 基础理论 & API 使用
前端·vue.js·面试
牛奶8 小时前
Vue 底层原理 & 新特性
前端·vue.js·面试
anOnion8 小时前
构建无障碍组件之Radio group pattern
前端·html·交互设计
pe7er8 小时前
状态提升:前端开发中的状态管理的设计思想
前端·vue.js·react.js
SoaringHeart9 小时前
Flutter调试组件:打印任意组件尺寸位置信息 NRenderBox
前端·flutter
晚风予星10 小时前
Ant Design Token Lens 迎来了全面升级!支持在 .tsx 或 .ts 文件中直接使用 Design Token
前端·react.js·visual studio code
sunny_10 小时前
⚡️ vite-plugin-oxc:从 Babel 到 Oxc,我为 Vite 写了一个高性能编译插件
前端·webpack·架构
GIS之路10 小时前
ArcPy 开发环境搭建
前端
林小帅11 小时前
【笔记】OpenClaw 架构浅析
前端·agent