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

}

相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘4 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js