如何让父层DIV的滤镜效果不影响到子层DIV，就是说避免父层透明度的继承问题

Posted 2023-04-12

在IE9和大多数浏览器，使用rgba就能避免父级影响后代的不透明度问题：

background: rgba(0,0,0,0.8);//前面3个0为红绿蓝颜色值，最后一个为不透明度

在IE6-8中，没有直接解决的办法，常用方案是：

在父级中添加2个DIV，第一个设置opacity不透明度，第二个定位到第一个上面。因为2个DIV是同级，所以避免了opacity的影响。

filter: alpha(opacity=80); //IE6-8
opacity:0.8;//标准浏览器

追问

第一种方法我试过 除了IE这个不兼容之外 还有一个就是本身的div拥有backgroundimage无法选择合适的颜色来设置透明度
第二种方法中我有些不太明白 第二个定位subdiv2到第一个subdiv1上面去 但是subdiv2仍然集成父层div的透明度 效果不是很好吧 lz能够解释一下原因么 O(∩_∩)O谢谢

追答

不是的，父级不设置opacity，只是第一个子DIV设置不透明度再将它覆盖整个父级的内容区域，第二个DIV则定位到第一个DIV上面。
在第一个DIV添加父级的背景图片，父级不要背景图片。

追问

LZ在问一下 这个我尝试了 理论上确实不会影响到第二个子层的透明度 但是这是从本机上看的效果 如果我将这个网页作为网站的一部分 从服务器登录来浏览的话 第一个子层的背景图片是显示不出来的

追答

能给我网址么，我看看具体代码。

追问

不好意思哈 我们这个是作为内部网络使用的 虽然接入到了外网 可是很多东西会被过滤掉 网段不一样 而且还没有权限 就像我们这个就能登录个知道

追答

呵~不客气啦，解决了就好。

参考技术A 你这个需求很诡异啊，如果你子层不要半透明，你干嘛把这个半透明属性设置给父层？为什么不设置给父层中其他需要半透明的元素？
或者说你的子层为什么非要放到这个父层里面？追问

主要是父层有背景图片 背景图片颜色太深 导致其上面移动的子层颜色不清晰

参考技术B 这个你考虑下用别的方法 比如添加一个半透明的图片什么的追问

背景是可变换的 我不可能每一个都增加成半透明的吧

参考技术C 在子层里面重新定义

CSS---关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案

 

代码如下：

<div>上部层</div>

<div> <!--父层-->
     <div style="margin-top:200px;">子层</div>
</div>

理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离，在ie中正常，但是在ff中却出现问题，子层和父层贴边了，而父层和上部层却间隔了200px。

百思不得其解，求助google，得到如下的一句：

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。

解决的办法有两个：

1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>

2、使用padding-top来解决，即：

<div style="padding-top:200px;">
    <div>子层</div>
</div>