Setting background transparency and not effecting text inside

Question

I am trying to get the title background of a site transparent but not the text within it:

#titlebackground {
     background-color: #333333;
     opacity: 0.5;
}
#title {
      font-family: Consolas, monaco, monospace;
      text-align: center;
      font-size: 9em;
      font-weight: 900;
      color: white;
      /*margin-top: -20%;*/
      display: inline-block;
      opacity: 1;
}
#titlelocation {
    position: relative;

}

        <div id="titlelocation">
          <div id="titlebackground">
            <span id="title">My title</span>
          </div>
   </div>

Setting the opacity of the span to 1 has no effect. How do I get the text to be fully seen but the background to be partially transparent?

score 3 · Accepted Answer · answered Dec 18 '15 at 21:12

Use rgba on the background and set the opacity there as it won't affect the children like opacity will.

#titlebackground {
  background-color: rgba(51,51,51,.5);
}
#title {
  font-family: Consolas, monaco, monospace;
  text-align: center;
  font-size: 9em;
  font-weight: 900;
  color: white;
  /*margin-top: -20%;*/
  display: inline-block;
}
#titlelocation {
  position: relative;
}

<div id="titlelocation">
  <div id="titlebackground">
    <span id="title">My title</span>
  </div>
</div>

Setting background transparency and not effecting text inside

1 Answers1