Can buttons in a half-transparent div be full opacity?

Question

I want to have a semi-transparent fixed bar at the bottom of the screen, that has some buttons on it, but I would like the buttons to appear as full opacity.

My problem is, that if I set the opacity of the bar, that obviously sets the buttons opacity (As they are children of the footer bar).

How can I have the bar as semi-transparent, but the buttons to appear with full opacity, without changing much of the HTML markup?

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

FYI: You'll want to remove the `hidden-xs` class in the fiddle, as the rendered HTML box is `xs` size, so the footer is hidden — Gareth Parker, Aug 22 '16 at 09:54
But no, you'll have to change your markup to solve this problem. You can't make the child of a half-transparent object be at full opacity — Gareth Parker, Aug 22 '16 at 09:56

score 5 · Accepted Answer · answered Aug 22 '16 at 09:55

put your opacity on the background-color instead using 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;
}

Can buttons in a half-transparent div be full opacity?

1 Answers1