如何创建网页遮罩层

小组 › Web前端

如何创建网页遮罩层

2017/04/19• Lady L •9 评论 • 前端

如题，我最近在做ppt时遇见了遮罩层，然后想到如果放到网页上，遮罩层怎么实现呢？有哪位哥们可以介绍下吗？小女子这番多谢了

1 赞收藏

直接登录

最新评论

龙骑士07 dota2业余选手 2017/04/19

.tab-add-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    filter: alpha(opacity = 50);
    z-index: 100;
}

.tab-add-mask {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: #000;

opacity: .5;

filter: alpha(opacity = 50);

z-index: 100;

}

将div中加入上述样式，控制display属性，即可实现遮罩效果。

Lady L （ 1 · ） web前端 2017/05/15

试了你的方案，可以啦，谢谢

赞回复

tolerious （ 1 · ） web高级开发工程师 2017/04/19

不就父元素position: fixed,子元素absolute么？有啥问题么？

赞回复

Lady L （ 1 · ） web前端 2017/05/15

没问题了

赞回复

Umbrella123 （ -1 · ）技术支持 2017/04/19

遮罩的话，firefox 浏览器 alert之后自带的遮罩效果是做的非常好的。之前也因为自己项目的需要模仿那个效果写了一个遮罩插件用于自己的项目中(www.farm167.com)；你提的问题我理解，想做遮罩最关键的还是把你想作为遮罩层的z-index 设置的高于其它所有层，置于遮罩的颜色就随你了，这是最核心的

赞回复

Lady L （ 1 · ） web前端 2017/05/15

get，谢谢

赞回复

又是一只猴子 2017/05/15

要理解position中四个值的意思：static,fixed,absolute,relative

static:默认值、正常的文档流

fixed：相对于body元素定位的、脱离正常的文档流

absolute：基于position的值不为static的父元素定位

relative:相对于正常文档流的定位、会影响到父子、兄弟元素的

赞回复

Lady L （ 1 · ） web前端 2017/05/16

明白

赞回复

啵啵2016 （ 1 · ）前端开发 2017/05/20

这种问题，百度一下，特别的多，问的心寒。。。

赞回复

相关话题

相关文章

最新评论