当前位置:jQuery学习 > css > css遮罩代码

css遮罩代码

时间:2010-10-07QQ群:116983258

今天贴一段css遮罩层的代码,相信大家已经看到很多遮罩层的效果了。但有些代码的兼容性并不是很好,今天看看下边这个完美实现css遮罩的代码。

.mask 
{
    background-color: rgb(0, 0, 0);
    display:none;
    opacity: 0.7; /* Safari, Opera */
    -moz-opacity:0.70; /* FireFox */
    filter: alpha(opacity=70); /* 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实现对象完全居中

作者:jQuery学习
除非注明,jQuery学习网文章均为原创,转载时必须以链接形式标明本文地址。
本文地址:http://www.jquery001.com/css-mask-code.html

大家说了些什么

  1. 1. andy 2010-10-11 17:28

    不错!顶一下

    • 朋友的你 2010-10-11 18:15

      @andy 看来保存cookie时有些问题,我这竟然能看到你的Email,是我用谷歌浏览器的原因?

  2. 2. a 2011-04-28 15:19

    不兼容

    • 朋友的你 2011-04-28 16:25

      @a 神马浏览器不兼容?^—^

所有话题