プロパティを子要素に変更する

Question

不透明度プロパティが0.5の親divがあり、子が不透明度1にしたい矢印です。問題は、子要素が常に親から0.5を継承するということです。矢印の不透明度を1に変更するにはどうすればよいですか？親要素、すなわち、矩形が不透明度0.5を保持しなければならないし、子供が不透明1.

<div class='contenedor_flecha_prev'> 
    <i class="fa fa-chevron-left flecha_izqu" ></i> 
</div> 

    .contenedor_flecha_prev{ 
    position: fixed; 
    height: 80%; 
    width: 8%; 
    background: black; 
    bottom: 10%; 
    min-width: 35px; 
    left: 0px; 
    z-index: 90; 
    opacity:0.5; 
    cursor:pointer; 
    -webkit-transition: all 0.4s ease-in-out; 
    -moz-transition: all 0.4s ease-in-out; 
    transition: all 0.4s ease-in-out; 
    } 

    .fa.fa-chevron-left.flecha_izqu{ 
     font-size: 55px; 
     color: white; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     -webkit-transform: translate(-50%,-50%); 
     transform: translate(-50%,-50%); 
     -moz-transform: translate(-50%,-50%); 
     opacity: 1; 
    } 

http://jsfiddle.net/2wonjwde/

Answer 1

を持っている必要がありますあなたが取る、その後、このブロックの主なサイズである共通の親を導入することができますあなたの矢印を現在の要素の外に置き、共通の親に入れ、2つの要素の不透明度を別々に設定します。

body { 
 
    background: red; 
 
} 
 

 
.parent { 
 
    position: fixed; 
 
    height: 80%; 
 
    width: 8%; 
 
    bottom: 10%; 
 
    min-width: 35px; 
 
    left: 0px; 
 
    z-index: 90; 
 
} 
 

 
.contenedor_flecha_prev { 
 
    background: black; 
 
    width: 100%; 
 
    height: 100%; 
 
    opacity: 0.5; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    -moz-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
} 
 

 
.fa.fa-chevron-left.flecha_izqu { 
 
    font-size: 55px; 
 
    color: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="parent"> 
 
    <div class='contenedor_flecha_prev'> 
 
    </div> 
 
    <i class="fa fa-chevron-left flecha_izqu"></i> 
 
</div>

しかし、私はそれは親にだけ背景だ場合は、不透明で代わりにblackのbackground: rgba(0,0,0,0.5);を使用してopacity: 0.5

body { 
 
background: red; 
 
} 
 

 
.contenedor_flecha_prev { 
 
    position: fixed; 
 
    height: 80%; 
 
    width: 8%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    bottom: 10%; 
 
    min-width: 35px; 
 
    left: 0px; 
 
    z-index: 90; 
 
    cursor: pointer; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    -moz-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
} 
 

 
.fa.fa-chevron-left.flecha_izqu { 
 
    font-size: 55px; 
 
    color: white; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
}

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
    <div class='contenedor_flecha_prev'> 
 
     <i class="fa fa-chevron-left flecha_izqu" ></i> 
 
    </div>

を削除したい場合は、コメントで言ったように