如何创建网页遮罩层

最新评论

• 

  龙骑士07    04/19

  CSS

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

  1 2 3 4 5 6 7 8 9 10 11

  .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前端 05/15

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

  赞 回复

• 

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

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

  赞 回复

• 

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

  没问题了

  赞 回复

• 

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

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

  赞 回复

• 

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

  get，谢谢

  赞 回复

• 

  又是一只猴子    05/15

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

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

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

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

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

  赞 回复

• 

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

  明白

  赞 回复

• 

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

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

  赞 回复