解决css中透明度继承问题

这个问题感觉遇到的人不多，但是真的是个坑，没想到透明度也有继承性吧！

我当时的业务场景是，外层div有个背景图片需要透明，子div还有其他图片，不需要透明。

以下是有问题的场景：

首先给大家看一下，没有加透明度的样子

代码如下：

把透明度的注释打开之后，父子都会加上透明度，即使我的子的透明度设置为1

效果如下：

解决办法：当时也查找了好几种办法，结合着思考，突然想到了解决办法

首先，看一下改动的html代码，添加了一个遮罩层，然后让他的宽高等于父元素的宽高，给该遮罩元素设置透明度；

然后，关键的一步是给遮罩元素以及显示图片的子元素都设置绝对定位就ok啦；

代码如下

效果如下：

我显示这个小女孩的图片颜色本来就比较浅，可能效果不是很明显，所以我就让遮罩的透明度深了一些，效果是实现的啦，不知道你们看出来没，会不会觉得麻烦，如果你们有更好的办法可以告诉我哦，让我学习学习~