设置背景透明度而不影响内部文本[重复]答案

【问题标题】：Setting background transparency and not effecting text inside [duplicate]设置背景透明度而不影响内部文本[重复]
【发布时间】：2016-03-25 15:46:48
【问题描述】：

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

#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 无效。如何让文本完全可见但背景部分透明？

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：