Как наложить Div на контейнер с непрозрачностью jQuery

Question

У меня есть контейнер с непрозрачностью 0,3

$('#containerFeatured').css('opacity',0.3)

Дело в том, что когда я пытаюсь наложить DIV-обертку на изображения, непрозрачность занимает весь DIV. Я пытался с z-index, но ничего не происходит.

Мой пример здесь

Спасибо!

Answer 1

Когда вы указываете непрозрачность элемента (то есть div), эта непрозрачность будет применяться и к его дочерним элементам. Очевидный способ обойти это - вывести непрозрачный контент за пределы div и использовать позиционирование CSS.

Answer 2

Вы можете попробовать это:

$(document.createElement('div'))
    .width($('#containerFeatured').width())
    .height($('#containerFeatured').height())
    .css({backgroundColor:'white', opacity:0.4, position:'absolute',left:0, top:0})
    .prependTo($('#containerFeatured'))
$('#containerFeatured').css('position','relative')

Возможно, вы захотите изменить высоту больше, но, по сути, сделайте свое дело :) 1004 *

Answer 3

Кроме перемещения дочерних элементов и использования позиционирования, вы также можете использовать PNG с непрозрачностью 30% в качестве фонового изображения контейнера div, однако тогда вам придется иметь дело с IE6.

Answer 4

Я использую непрозрачный png для фона, затем применяю исправление Unit Interactives PNG

http://labs.unitinteractive.com/unitpngfix.php

Я думаю, что это самое чистое и простое решение.