sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > css遮罩代码(已验证)

css遮罩代码(已验证)

作者:xuhongji发布时间:2020-09-17分类:Html浏览:94评论:0


导读:#mask{background-color:rgb(0,0,0);display:none;opacity:0.0;/...
#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;
}

可见上边的样式可实现半透明的遮罩层,我们只需将一个p标签放置在我们的body中,如下:

<p id="mask" class="mask">p>

在需要遮罩的时候,我们只需将mask变成可见的即可:

$("#mask").show();

最后,我们将要显示的内容居中显示在我们的遮罩层之上就可以达到我们想要的效果了,位置通过z-index来控制。在遮罩层上的显示内容一般需要居中显示,如果你对css居中还不熟悉,请查水费。


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章