html - 将属性更改为元素子项

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

你可以引入一个公共(public)父元素，它是这个 block 的主要尺寸，然后将你的箭头从当前元素中取出并放入公共(public)父元素中，并分别设置这两个元素的不透明度。

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>