Question

我有一个父级div，其opacity属性为0.5，子级是一个我想要不透明度的箭头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个元素的不透明度。

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

但正如我在评论中所说，如果它只是父母的背景而你想要变得不透明，请使用background: rgba(0,0,0,0.5);代替black并删除opacity: 0.5 < / p>

＆＃13;

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%);
}

＆＃13;

<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>

＆＃13;

将属性更改为元素子

1 个答案: