遮罩层内容半透明解决

div id="nav_img_ios" 是遮罩层,从左上侧 top:0 left:0 的位置 100% 屏幕整个屏幕 divid="qrcontainer" 是遮罩层中间填充内容的部分 div id="qr" 是一个二维码容器,里面是 javascript自动生成二维码的填充容器 div id="describe" 是二维码下面的一段描述文本

##我们看下上面展示的效果

这个效果明显不是我们想要的,二维码后面的div竟然也是透明的,把底部 footer 里面的文字印过来了 “加载更多回复”

##下面我们来改造中间内容 div id="qrcontainer" 让他不要透明

仔细浏览下 qrcontainer div 里面的样式内容,貌似我们也没有定义透明,为啥这层也透明了?

---

原来是父级 div id="nav_img_ios" 搞的鬼

在css 中,如果父级div 设置了 opacity ,filter 等属性,那么他的子dom将全部被透明化,就算你绝对定位把他移到十万八千里,照样透明. 看来我们还得从父级 div 的样式来入手.

其实我们要设置遮罩层透明,只要指定他的背景透明即可,设置背景透明的还有另外一种属性 rgba 下面我们把 父级div的样式改造如下

上面我们把 background:#000;filter:alpha(opacity=60);z-index:1000;opacity: 0.6; 替换成了background:rgba(0,0,0,0.6);