opacity being applied to inside div when I don't want to

Question

I am setting a wrapper to be full screen with a slight opacity. Within that wrapper I have another div which is to be centered on the screen. All works, but the opacity is being applied to the inner div (loading icon and some text).

The html cannot change in the sense that .dataTables_processing will always be a wrapper no matter what.

html:

<div class="dataTables_processing">
    <div class="dataTables_processing_custom">
        <i class="fa fa-spinner fa-spin"></i> Please wait...
    </div>
</div>

css:

.dataTables_processing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0;
    padding: 0;
    background-color: #333;
    opacity: 0.05;
    cursor:wait;
    z-index:9998;
}

.dataTables_processing_custom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 30px;
    margin-left: -100px;
    text-align: center;
    color:#3276b1;
    font-size: 14px;
    z-index:9999;
}

.dataTables_processing_custom i{
    font-size:30px;
    vertical-align:middle;
}

possible duplicate of [CSS: semi-transparent background, but not text](http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text) — , Jan 01 '14 at 18:31

score 1 · Accepted Answer · answered Jan 01 '14 at 18:27

1

When the CSS style opacity is applied to the parent, it does it to all it's children, try using a RGBA method for a background instead:

.parent {
background: rgba(0,0,0,0.5);
}

answered Jan 01 '14 at 18:27

@user756659 No problem, be sure to vote best answer when you can. It helps – Jan 01 '14 at 18:36

opacity being applied to inside div when I don't want to

1 Answers1