CSS - Размещение <divs> поверх прозрачных <div>

Есть ли способ сделать контент/изображения не прозрачными, если внутри <div> есть прозрачность?

Здесь HTML:

    <div id="main-button-wrapper" class="left">

        <div id="button-bg-layer" class="box-bg-layer corners"></div>

        <div class="buttons-bg-overlay box-bg-overlay corners">

            <img alt="Test" src="http://www.schroff.co.uk/railway/src/symbol_test.gif" />

        </div>

    </div>

CSS:

#main-button-wrapper {
    height: 319px;
    margin-left: 22px;
    position: relative;
    width: 321px;
}

#button-bg-layer {
    position: absolute;
    right: 0;
    height: 319px;
    width: 321px;
}

.buttons-bg-overlay {
    position: relative;
    right: 0;
    margin: 11px;
    height: 66px;
    width: 299px;
    text-align: center;
    padding-top: 26px;
}

#buttons-wrapper {
    position: relative;
    width: 299px;
    height: 297px;
    z-index: 3;
    margin: 22px;
}

/* Background Layers */

.box-bg-layer {
    background-color: #010101;
    z-index: 1;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

.box-bg-overlay {
    background-color: #010101;
    z-index: 2;
    zoom: 1;
    filter: alpha(opacity=40);
    opacity: 0.4;   
}

Я пробовал поставить z-index: 4; на изображении. Единственный другой способ, которым я могу думать, - установить фон div как абсолютное позиционирование, а затем позиционировать контент вне div, но должен быть более простой способ?

Любая помощь приветствуется!

См. JSFiddle:

http://jsfiddle.net/Sa8jw/