#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居中还不熟悉,请查水费。

css遮罩代码(已验证)的更多相关文章

  1. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  2. 手机开发必备技巧:javascript及CSS功能代码分享

    1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域,这是真正有效的区域.由于移动设备屏幕宽度不同 ...

  3. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

  4. 破圈法求解最小生成树c语言实现(已验证)

    破圈法求解最小生成树c语言实现(已验证) 下面是算法伪代码,每一个算法都取一个图作为输入,并返回一个边集T. 对该算法,证明T是一棵最小生成树,或者证明T不是一棵最小生成树.此外,对于每个算法,无论它 ...

  5. 纯CSS实现表单验证

    ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...

  6. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  7. css中代码格式以及@import的语法结构

    CSS中代码格式 CSS是Cascading Style Sheets(层叠样式表)的缩写.是一种对web文档添加样式的简单机制,属于表现层的布局语言. 1.基本语法规范分析一个典型CSS的语句: p ...

  8. [转]CSS遮罩——如何在CSS中使用遮罩

    特别声明:此篇文章由D姐根据Christian Schaefer的英文文章原名<CSS Masks – How To Use Masking In CSS Now>进行翻译,整个译文带有我 ...

  9. 【.NET】由于代码已经过优化或者本机框架位于调用堆栈之上,无法计算表达式的值。

    前言 上段时间做项目时,遇到如题之类问题,如今过去有一段时间了,具体出现的情形忘了,当时虽然找到了解决方法,但是依旧没有弄明白出现此种情况是何种原因,后来在微软的帮助支持中心找到了答案,特此记录,以防 ...

随机推荐

  1. 固定Table的头部和左边的列-在Knockout Js使用场景下

    要求:固定Table的头部和左边的列 场景:Knockout Js被用于绑定Table的数据源. 固定HTML表格的头部和列是一个很常见的需求.此文:http://www.cnblogs.com/so ...

  2. MongoDB学习笔记~根据子集合里某个属性排序

    回到目录 这个问题是这样的,有一个实体dog,里面有集合属性DogHistory,它里面有一些自己的属性,其中一个是SortNum,主要用来进行排序,而且这个排序可以影响主对象,即影响dog类,这个在 ...

  3. 《Node web开发》笔记

    还是因为学习kibana,才开始了解node. Node是一种基于事件驱动的异步系统,基于Chrome的引擎V8. Node中由于大量的使用模块,因此出现了很多开源模块,有点像java社区的样子. 笔 ...

  4. iOS-大神们的博客收集

    唐巧的技术博客 http://blog.devtang.comOneV's Den http://onevcat.com破船之家 http://beyondvincent.comNSHipster h ...

  5. sql复习第四次

    1.关系操作的特点是集合操作 2.关系模型的完整性规则包括实体完整性规则,参照完整性规则,用户定义的完整性规则 3.rou联接运算是由笛卡儿积和选择操作组合而成的 4.自然联接运算是由笛卡儿积,选择, ...

  6. WPF自定义控件与样式(2)-自定义按钮FButton

    一.前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...

  7. 传智播客--XAML布局--连连看界面(小白内容)

    一个简单的10*10连连看,有100个格子,可以在XAML里面用ColumnDefinition和RowDefinition各写10组,但是这样效率会很慢,因此,可以采用动态生成的方式进行. publ ...

  8. 使用HTML5里的classList操作CSS类

    在HTML5 API里,页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋 ...

  9. 外网访问原理分析 - 每天5分钟玩转 OpenStack(105)

    本节我们会将上节创建的 ext_net 连接到 router,并验证内外网的连通性. 更重要的,我们会分析隐藏在表象之下的原理. 将外网连接到 Neutron 的虚拟路由器,这样 instance 才 ...

  10. Oracle Database 11g Express Editon介绍及安装

    一.Oracle Database 11g Express版本介绍 公司项目开发中,使用的数据库是Oracle 10g和MySQL 5.5,最新因为开发需要,需要从后台读取一些数据.使用的客户端是PL ...