父级在下，子级在上，父级透明子级不透明的写法

 1  首先正常写法：

     

<div id="fuji" style="width:300px;height:300px;background-color:black;opacity:0.5">                        //父级
            <div id="ziji" style="width:100px;height:100px;background-color:red;opacity：1"></div>          //子级

</div>

  因为父级有透明度，所以子级一定继承父级的透明度，即使在子级写上不透明：opacity：1，也是在继承父级明opacity:0.5的情况下再不透明

 所以界面如下

                                                                                  

 如想实现父级透明，子级不透明可以将他的子级变成与父级是兄弟的关系然后定位到父级上，在用position:realative定位；代码如下：

        <div id="fuji" style="width:300px;height:300px;background-color:black;opacity:0.5;z-index:10"> </div>
        <div id="ziji" style="width:100px;height:100px;background-color:red;position:relative;top:-300px;"></div>

界面如下：   

                                                                            

想要父级透明，内容不透明也可以用这个方法，只需将子级背景色去掉即可