设置背景透明度而不影响文本内部

Question

我试图让网站的标题背景透明但不是其中的文字：

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

将跨度的不透明度设置为1无效。如何让文本完全被看到，但背景是否部分透明？

Answer 1

在背景上使用rgba并在那里设置不透明度，因为它不会像不透明度那样影响孩子。

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