css遮罩代码(已验证)
2024-10-14 17:18:50
#mask
{
background-color: rgb(0, 0, 0);
display:none;
opacity: 0.0; /* Safari, Opera */
-moz-opacity:0.0; /* FireFox */
filter: alpha(opacity=0); /* IE */
z-index: 100;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
可见上边的样式可实现半透明的遮罩层,我们只需将一个div标签放置在我们的body中,如下:
<div id="mask" class="mask"></div>
在需要遮罩的时候,我们只需将mask变成可见的即可:
$("#mask").show();
最后,我们将要显示的内容居中显示在我们的遮罩层之上就可以达到我们想要的效果了,位置通过z-index来控制。在遮罩层上的显示内容一般需要居中显示,如果你对css居中还不熟悉,请查水费。
最新文章
- .NET跨平台之旅:探秘 dotnet run 如何运行 .NET Core 应用程序
- 中文乱码?不,是 HTML 实体编码!
- ecshop前台英文后台中文
- CDN学习笔记二(技术详解)
- Tensorflow ——神经网络
- Android实现button一边圆角一边直角
- SQL 必知必会-- 第1课:数据库基础和什么是SQL
- 序列化对象C++对象的JSON序列化与反序列化探索
- C 队列顺序存储
- sql两个表联合更新
- Android清理内存
- [转]spring mvc注解方式实现向导式跳转页面
- 复习-C语言内嵌汇编-初级(1)
- jmeter 单接口测试方案(接口无业务关联)
- Linux shell if判断语句
- hibernate session.createSQLQuery(sql); 通过命令删除
- 自学Aruba集锦
- 【原创 深度学习与TensorFlow 动手实践系列 - 1】第一课:深度学习总体介绍
- MUI 拍照或选取照片上传作为头像
- QToolButton按钮
热门文章
- [.net 面向对象程序设计深入](5)MVC 6 —— 构建跨平台.NET开发环境(Windows/Mac OS X/Linux)
- PC使用网线上网的条件下,通过PC的Wifi共享提供手机上网教程
- CSharpGL(0)一个易学易用的C#版OpenGL
- ASP.NET MVC 5 - 创建连接字符串(Connection String)并使用SQL Server LocalDB
- 《Entity Framework 6 Recipes》翻译系列 (5) -----第二章 实体数据建模基础之有载荷和无载荷的多对多关系建模
- vSphere Client 编辑虚拟机属性的问题
- 浏览器执行js代码的机制--对于我们深入了解js有很大的帮助,同时面试时候也都能用得到。
- Python第一天 - set
- windows下实现Git在局域网使用
- 在Linux(ubuntu server)上面安装NodeJS的正确姿势