css设置了透明背景，字也被透明了

小姐姐最近在写大数据平台，UI画的都快吃不消了，有没有人可怜一下。

封装了一个组件，背景是个渐变透明色，但是文字也被透明了，小姐姐好气哦，最后直接跟UI说，为啥我的字被透明了啊，UI说你肯定没把文字放在上面，小姐姐又说，我这就是在上面啊......

最后没扛过UI，开启了寻找度娘之旅。

先看看刚开始写出来是什么效果呢？

 代码长这个样子的

<div class="box"></div>

.box {

        width: 326px;

        height: @layout-screen_statistic_target_fr_height;

        background: linear-gradient(180deg, rgba(66, 82, 255) 0%, rgba(23, 29, 59) 100%);

        margin: 0 29px;

        position: relative;

        border: 1px solid #4881F75c;

        opacity: 0.8;

}

唉，是不对啊，为啥会被透明了，补充了一下rgb和rgba的知识，是因为alpha是设置透明度的，把透明度放到rgba就好了。

.box {

        width: 326px;

        height: @layout-screen_statistic_target_fr_height;

        background: linear-gradient(180deg, rgba(66, 82, 255, 0.8) 0%, rgba(23, 29, 59, 0.8) 100%);

        margin: 0 29px;

        position: relative;

        border: 1px solid #4881F75c;

}

好啦，看看效果吧