CSS如何只改变父元素背景透明度不改变子元素透明度

Posted 2023-04-12

没有办法，给父级加了透明度，那他里面的内容都是按照这个透明度显示的，再给子集单独设置opacity:1这样是在原来的透明度的基础上在执行的，也就是如果父级的是opacity:0.5，那再给子集添加opacity:1，她是在0.5透明度的基础上的不透明显示，那还属于有0.5的透明度，这个你可以添加一个单独的层，定位到某个位置，然后设定透明度，不要给父级添加透明度。 参考技术A

当你是用 opacity 给一个元素设置透明度是，请注意，你修改的是这个元素的本质上的透明度。

那么在这个元素里所有的内容，包括它自己的属性(比如背景色),它内部的子元素，比如里面有个div.child 都会变的透明，而且无论你如何修改 div.child 的 opacity=1.0 都无法改变它变成了一个透明元素的事实。

原因也很简单：那就是由于我们修改的是父容器的 opacity 属性，这个属性是把元素本身都变的透明，那么存在于这个元素内部的一切都会按照 opacity 属性的值来变的透明。

所以，现在就认清了一个事实了：opacity，只要设定了，元素本质上就变的透明了。在其内部的一切都会受到这个值的影响。

解决办法，

    1. 如果是一个透明的背景色，那么没有必要大费周章的把元素的本质弄透明，你只需要在设置颜色的时候，使用 rgba 32 位带透明度的颜色即可。(父元素的 opacity 依然是1.0）。

    2. 如果是一个半透明的背景图片。那么你可以把背景图片作为一个 opacity 为 1的 父容器视图的第一个子元素。铺满整个父容器。让后设置 img 的 opacity(.5).【请 注意，此时父容器的 opacity=1.0】，然后利用绝对定位，把你需要的第二个显示内容的容器以img 为兄弟元素的关系定位在父容器里即可。(兄弟元素之间 ，opacity 是不受其影响的)

        

参考技术B 可以把带有 不透明度的div 跟 嵌套img 的div 分开来，也就是 把两个效果分开，让 背景图片的div 跟 img 所在的div在相同的位置， 但设置 不同的 z-index 值，让背景图片的div在 img div 的下层。效果上可以达到你想要的，但 在你说的基础上 多一个带有背景 div 。这样 透明度就不会影响，因为 这时 img不是 带透明度div的子元素。

CSS实现父元素半透明，子元素不透明

CSS实现父元素半透明，子元素不透明

CSS实现父元素半透明，子元素不透明。 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明，而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明。但是这样实现的半透明有个问题，那就是这个属性会被子元素所继承。

如下代码，则子元素中也将是半透明效果，无论你将子元素的半透明值重置还是如何都不会改变这一情况。

.parentopacity:0.5; background-color:#fff;
.childopacity:1.0; background-color:#fff; height:200px;

HTML:

<div class="parent">
    <div class="child">哈哈哈</div>
</div>

其实在新的CSS3规则里面的属性 GRBA已经可以方便的实现父元素透明，而子元素不透明了。 如下代码

<div class="parent" style="background:rgba(255,255,255,0.5)">
    <div class="child" style="height:200px; background-color:red">哈哈哈</div>
</div>

但是对于IE6~8方面就无法兼容了，可以适当的降级。 如果一定要兼容的话只能考虑使用绝对定位的，看上去是包含关系的两个层，其实是兄弟关系，使用JS来控制其位置的呈现，这种具体就不再陈述了，网上解决方案很多。