opacity when having a div inside a div.

[crispybagel]

So my problem is that i've set an opacity level for the outer div and somehow the opacity of the inner div is affected by this even if i set the z-index or opacity of the inner div higher. any1 knows how to fix? OUTER div="Categorybar", INNER div="Completed" .cat

 

HTML:

<div id="Categorybar">

    <a href="https://pcpartpicker.com">
      <div class="cat" id="Completed">
        <span class="cattext">COMPLETED</span>
        <img class="dropdown" src="Dropdown Arrow 2.png" alt="HTML5 Icon">
      </div>
    </a>

CSS:

#Categorybar {
  margin-top: 200px;
  height: 70px;
  width: 100%;
  background-color: black;
  opacity: 0.6;
  z-index: 3;
  position: absolute;
}
#Completed {
  height: 100%;
  width: 12%;
  background-color: transparant;
  position: absolute;
  left: 44%;
  line-height: 70px;
  text-align: center;
  z-index: 5;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: 156.25%;
  font-family: TW Cen MT Regular;
  color: white;
}
.cat:hover {
  background-color: #1f1f1f;
}
.cattext:hover {
  color: #00fff6;
}

 

[vorticalbox]

its called inheritance. Child nodes take the formatting of their parents. 

 

You'll need to set the opacity of the child.

[crispybagel]

35 minutes ago, vorticalbox said:

its called inheritance. Child nodes take the formatting of their parents. 

 

You'll need to set the opacity of the child.

it doesnt matter if i set the opacity of the child to 1.0, it still displays as 0.6

[leonfagan71]

1 hour ago, Crispybagel said:

it doesnt matter if i set the opacity of the child to 1.0, it still displays as 0.6

That's correct, opacity works in a different way.

 

Is there a main reason to use opacity? Why not just change the background color::

background-color: rgba(0,0,0,0.6);

 

a:link,a:visited,a:hover,a:active {color: inherit;}
#Categorybar {
  margin-top: 200px;
  height: 70px;
  width: 100%;
  background-color: rgba(0,0,0,0.6);
  z-index: 3;
  position: absolute;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
  font-size: 156.25%;
  font-family: TW Cen MT Regular;
  /*color: white;*/
}
.cat:hover {
  background-color: #1f1f1f;
  color: #00fff6;/*Just changes on hover unless overridden*/
}

Not sure if that's any help as I don't know your preferred end result.

 

Regards,

Leon.