子元素继承父元素透明度问题

前端经常会有alert效果，一搬系统的alert非常丑，而且不同浏览器alert样式不一样，我们在开发中都是通过自己写alert组件来达到自己想要的效果。
在写一个alert效果的时候，一般会给容器一个透明度（当然这个不是必须，除非样式上你看的下去）。

我们都知道，子元素默认是继承父元素样式属性。那么问题好像要来了，例如下面：

<div class="al-box">
<div class="al-title">系统提示</div>
<div class="al-con">操作成功！</div>
</div>

css

.al-box{background:black;opacity:0.4;padding:10px;text-align:center;}//容器
.al-title{font-size:32px;}//标题
.al-con{font-size:24px;}//alert内容

这样写，出来的效果就是，黑色背景给了透明度，突然发现，子元素文字也被透明了（这个就是问题了）
我们只想透明背景而已@#￥%￥#，好了，不扯远了，下面给正确做法：

.al-box{background:rgba(0,0,0,.4);padding:10px;text-align:center;}//容器
.al-title{font-size:32px;}//标题
.al-con{font-size:24px;}//alert内容

看到了吧，只是去掉了前例的opacity

然后透明效果是通过background:rgba(0,0,0,.4);来实现的

如有其它解决方法思路，欢迎讨论