php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业

CSS绝对定位实现窗口遮罩功能:

这是HTML代码部分

实例

html>

绝对定位之遮罩

用户登录窗口

用户名：

密码：

运行实例 »

点击 "运行实例" 按钮查看在线实例

这里是CSS绝对定位－遮罩：css部分

实例

body {

margin: 0;

background-image: url(../images/php.jpg);

background-repeat: no-repeat;

background-size: cover;

}

.shade {

/* 遮罩绝对定位，并自动伸展到整个窗口 */

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-color: black;

opacity: 0.7;

}

.login {

background-color: white;

/* 登录窗口不随窗口大小变化，说明它不是文档流中，是绝对定位 */

position: absolute;

/* 使登录窗口页面在正中间位置开始显示，注意是显示的起点在正中间 */

left: 50%;

top: 50%;

margin-left: -150px;

margin-top: -190px;

}

.login form {

width: 300px;

height: 380px;

}

.login form h3 {

color: blue;

text-align: center;

}

.login form label {

color: green;

}

运行实例 »

点击 "运行实例" 按钮查看在线实例

php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业相关推荐

2019年6月20日工作总结---CSS篇
1.:webkit-scrollbar 自定义滚动条的样式(缺陷对Firefox和IE不支持) 实例: 属性: ::-webkit-scrollbar 解决了把bar本身的背景.它通常由 ...
css盒模型只能应用于html,iframe，css样式表，盒模型的使用方法-2019年9月3日
实例演示:标签的使用实例演示: css样式设置的优先级实例演示: css的id, class与标签选择器的使用规则实例演示盒模型的五大要素: width, height, padding, bo ...
简述html 布局的原理,css布局原理与实现-2019年9月4日20时
1.实例演示如何消除子元素浮动造成父元素高度折叠的影响. 实例 html> 浮动 .box1 { width: 250px; border: 5px dashed rebeccapurple; ...
#单机只打开一次窗口_[2019年11月27日]CCWOW单机版修复内容
各位CCWOWER,单机版发布2个月以来,一直没有进行过功能性的更新,最近花了3天的空闲时间为单机版做的一些功能,同时发布32位单机版本,下面是更新日志: 2019-11-27系统为没有单位属性的物 ...
个体工商户核名查询_秒懂！个体工商户注册无需到窗口“预先核名”，自主申报“15图搞定”！...
自商事制度改革以来,公司及个体工商户登记注册等事项也随之进行一系列调整.自2019年7月1日以来,省局统一取消分局行政窗口名称远程核准模块,全部改为由经营者在"江苏政务服务网"上进 ...
html绝对定位自适应不同分辨率,(css)绝对定位如何在不同分辨率下的电脑正常显示位置？...
关于网友提出的" (css)绝对定位如何在不同分辨率下的电脑正常显示位置?"问题疑问,本网通过在网上对" (css)绝对定位如何在不同分辨率下的电脑正常显示位置?&quo ...
html页面添加遮罩层,在浏览器窗口上添加遮罩层的方法
如何在浏览器窗口上添加一个遮罩层背景在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, c ...
CSS实现全屏遮罩
为什么80%的码农都做不了架构师?>>> 现在全屏的半透明遮罩层在web2.0网站应用非常广泛了,绝大多数遮罩是通过计算页面大小,然后覆盖一个与页面同等大小的层实现,如腾讯qz ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...

php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业

用户登录窗口

php如何使用遮罩,CSS绝对定位实现窗口遮罩功能:2019年1月15日作业相关推荐

最新文章

热门文章