当前位置:Gxlcms > html代码 > css遮罩代码(已验证)

css遮罩代码(已验证)

时间:2021-07-01 10:21:17 帮助过:22人阅读

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

人气教程排行