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

}

相关推荐
徐同保18 分钟前
React useRef 完全指南:在异步回调中访问最新的 props/state引言
前端·javascript·react.js
fanruitian20 分钟前
uniapp 创建项目
javascript·vue.js·uni-app
刘一说1 小时前
Vue 导航守卫未生效问题解析:为什么路由守卫不执行或逻辑失效?
前端·javascript·vue.js
一周七喜h1 小时前
在Vue3和TypeScripts中使用pinia
前端·javascript·vue.js
weixin_395448912 小时前
main.c_cursor_0202
前端·网络·算法
摘星编程2 小时前
用React Native开发OpenHarmony应用:Calendar日期范围选择
javascript·react native·react.js
东东5162 小时前
基于vue的电商购物网站vue +ssm
java·前端·javascript·vue.js·毕业设计·毕设
MediaTea2 小时前
<span class=“js_title_inner“>Python:实例对象</span>
开发语言·前端·javascript·python·ecmascript
雨季6663 小时前
Flutter 三端应用实战:OpenHarmony “微光笔记”——在灵感消逝前,为思想点一盏灯
开发语言·javascript·flutter·ui·dart
编码者卢布3 小时前
【Azure Stream Analytic】用 JavaScript UDF 解决 JSON 字段被转成 Record 的关键点
javascript·json·azure