Question

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

Answer 1

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

Answer 2

当你是用 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 是不受其影响的)

        

Answer 3

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