z-index с фоновым изображением и прозрачностью

Question

Я пытаюсь создать полупрозрачный div и написать текст поверх этого.

Итак, я создал родительский тег с относительной позицией. Наличие одного дочернего диапазона с установленной прозрачностью .body-content-background и другой ребенок, у которого есть все текстовое содержание menu-bar

Я установил z-index родительского div как -999 фоновый дочерний элемент как -9 и текст div child как 1

Но все же ссылки <a> в текстовом div не активируются (или полупрозрачный белый div) не появляется)

http://jsfiddle.net/GauravMShah/MHhNG/

Может кто-нибудь сказать мне, где я не прав?

Answer 1

Это то, к чему вы стремились? http://jsfiddle.net/MHhNG/1/

Я изменил ваши значения z-index так, что фон равен 0, прозрачный div равен 1, а ссылки равны 2 (мне пришлось добавить это и указать им положение: относительное).

Возможно, вы захотите изменить их снова, чтобы иметь более разнесенные значения, если вам нужно разместить между ними другие вещи (например, 10, 20, 30).

Answer 2

Вы можете сделать это просто с непрозрачностью и фильтром родительского div. то есть:

#main {
    clear: both;
    overflow: hidden;   
    background-color: #000;
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.60);
    -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=2,MakeShadow=true,ShadowOpacity=0.60)";  zoom: 1;
}