父級在下，子級在上，父級透明子級不透明的寫法

 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>

界面以下：   

                                                                            

想要父級透明，內容不透明也能夠用這個方法，只需將子級背景色去掉便可