css3中的opacity属性是用来设置 div 元素的不透明级

https://blog.csdn.net/AngelLover2017/article/details/84996132?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

css3中的opacity属性是用来设置 div 元素的不透明级别的，但是我们往往会遇到因为父级元素设定opacity后，子元素也跟着透明了，但是有时候我们只是想让背景是透明的，这该如何解决呢？

解决方案

这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式：

使用rgba()间接的设定opacity

rgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题

可见这种方式是可行的，但是低版本的浏览器比如ie6/7等对rgba不兼容，所以虽然可以实现但是不尽人意，看一下面一种方式?

把opacity属性放到同级元素实现

这里的方式，也很巧妙，通过z-index来控制层级覆盖，通过设置一个同级的absolute的div元素放置到父级元素的上面，然后把这个div作为背景，其他的通过设定position为relative和z-index来实现浮于背景div上面

这种方式因为是通过巧妙的方式实现的相当于是伪装了一下，所以只要兼容opacity属性的浏览器都可以兼容这种方式啦