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

Posted 2023-03-06

【中文标题】设置背景透明度而不影响内部文本[重复]

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

【参考方案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>