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

使用rgba https://jsfiddle.net/2bmgg3Lr/1/

将您的不透明度放在background-color上

#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;
}

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

1 个答案: