設置背景透明度，而不是進行文字裏面

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>