css实现背景透明，背景中文字不透明

代码如下所示：

<div class="login">  
	 <div class="topbar">
		<p>欢迎登录天下酒店客房管理界面平台</p>
	</div>
</div>

如果用opacity来控制透明度，即代码为：

.topbar{
	width:100%;
	opacity:0.5;
	padding:15px 10px;
		p{
			color:white;
            margin: 0;
          }
}

效果图会如下：

div中的文字部分也有透明度，这是因为opacity会对其内部的子元素的透明度产生影响，也就是说这段文字实际上也会有透明度，那么如果我们不希望内部文字有透明度，即“背景透明，文字不透明”，就用以下方法：

 .topbar{
            width:100%;
            background-color:rgba(0,0,0,0.4);
            padding:15px 10px;
            p{
                color:white;
                margin: 0;
            }
        }

效果图如下：

核心在于用rgba设置背景透明度。

参考文章：https://www.cnblogs.com/PeunZhang/p/4089894.html