استفاده از opacity تو در تو - css

[<?php?>]

این کد html رو با css ببینید :




<div class="main-box">
<i class="mogh"></i>
</div>





.main-box{
width:958px;
height:370px;
display:block;
margin:0 auto;
margin-top:20px;
opacity:0.4 !important;
background-color:black;
}
.main-box .mogh{
width:241px;
height:270px;
display:inline-block;
background-image:url("../icon/sp.png");
background-position:0px -100px;
margin:40px 10px 0 0;
opacity:1;
}



تگ div رو میخوام opacity=0.4 بدم - تگ i رو میخوام opacity=1 بدم .
مشکل سره اینه که هم div و هم i هر دوتا opacity=0.4 شده - من تو اخرین لاین دوباره از opacity:1 برای تگ i استفاده کردم ولی بازم تگ i هنوز opacity=0.4 هست ؟ چرا مگه css به صورت خطی کد هارو کامپایل نمیکنه؟

[khanlo.javid]

دوست عزیز از این کد استفاده کنید برای هر کدوم جواب میگیرید .


background-color:rgba(0, 0, 0, 0.4);

موفق باشید