将属性更改为元素子

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>

但是就像我在评论中说，如果它只是在你想成为不透明的父的背景下，使用background: rgba(0,0,0,0.5);代替black和删除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>