半透明 div 中的按钮可以完全不透明吗？

Question

我想在屏幕底部有一个半透明的固定栏，上面有一些按钮，但我希​​望按钮显示为完全不透明。

我的问题是，如果我设置栏的不透明度，显然会设置按钮的不透明度（因为它们是页脚栏的子项）。

如何使栏为半透明，但按钮以完全不透明的方式显示，而不更改大量 HTML 标记？

https://jsfiddle.net/leecollingsco/2bmgg3Lr/

<div id="footerBar" class="hidden-xs">
    <div class="container">
        <div class="text-center">
            <a href="/contact-us" class="btn btn-primary"><span class="fa fa-phone"></span> Call 01234 567890</a>
            <a href="/contact-us" class="btn btn-primary"><span class="fa fa-mouse-pointer"></span> Book a consultation</a>
            <a href="/events" class="btn btn-primary"><span class="fa fa-calendar-o"></span> Come to an open evening</a>
        </div>
    </div>
</div>

#footerBar {
    position:fixed;
    bottom:5px;
    left:0;
    width:100%;
    padding:.75em 0;
    color:#fff;
    opacity:.5;
    background-color: #eee;
    box-shadow:0 0 1.5em rgba(0,0,0,0.5);
    z-index:999;
}

Answer 1

把你的不透明度放在上面background-color而不是使用rgba https://jsfiddle.net/2bmgg3Lr/1/

#footerBar {
    position:fixed;
    bottom:5px;
    left:0;
    width:100%;
    padding:.75em 0;
    color:#fff;
    background-color: rgba(238, 238, 238, 0.5);
    box-shadow:0 0 1.5em rgba(0,0,0,0.5);
    z-index:999;
}