css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？
我们常常想到的方法是直接给子元素的opacity设定为1，如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>opacity</title> </head> <style type="text/css"> .opacity{ position: relative; width: 400px; height: 300px; color: black; background: red; opacity: 0.5; } .opacity-child{ position: relative; opacity: 1; } .normal{ width: 400px; height: 300px; background: red; color: black; } </style> <body> <div class="opacity"> <div class="opacity-child">子元素会继承父级元素的opacity属性</div> </div> <div class="normal">子元素会继承父级元素的opacity属性</div> </body> </html>这样我们得到的是无效的：
那我们应该如何解决呢？
这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：
使用rgba()间接的设定opacity
rgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题啦，示例如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>opacity</title> </head> <style type="text/css"> .opacity{ position: relative; width: 400px; height: 300px; color: black; background: rgba(255,0,0,0.5); } .opacity-child{ } .normal{ width: 400px; height: 300px; background: red; color: black; } </style> <body> <div class="opacity"> <div class="opacity-child">子元素会继承父级元素的opacity属性</div> </div> <div class="normal">子元素会继承父级元素的opacity属性</div> </body> </html>效果如下：
