Lee Lee - 3 months ago 11
CSS Question

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

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

Answer

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