将属性更改为元素孩子

Question

我的父级为0.5的父级，孩子是我想具有不透明度的箭头。问题是，孩子元素始终从父母那里继承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>