z-index / opacity в css / jQuery не работает так, как хотелось бы

Question

Я делаю просмотрщик картинок для моего сайта.Существует проблема с непрозрачностью отображаемого изображения.Я хочу, чтобы непрозрачность моего изображения составляла 100%, а моего черного фона - 80% вместо:

Я пытался установить непрозрачность непосредственно на своем изображении, но это не сработало.

У меня есть эта функция jQuery:

$("img").click(function(event){
        // Create image frame
        $("#imageView").css("width" , $(document).width());
        $("#imageView").css("height" , $(document).height());
        $("#imageView").css("display" , "block");
        $("#imageView").css("opacity" , "0.8");
        $("#imageView").css("background-color" , "black");
        $("#imageView").css("position" , "absolute");
        $("#imageView").css("left" , "0");
        $("#imageView").css("top" , "0");
        $("#imageView").css("z-index" , "9000");
        $("#imageView").css("text-align" , "center");

            // Load big picture
        var miniSrc = $(this).attr("src").split("/");
        var imgName = miniSrc[miniSrc.length - 1];
        var bigSrc = "images/big/" + imgName;
        var imgHtml = "<img id='bigImg' src='" + bigSrc + "' alt='' style=\"heigth:200px; width:300px\"/>";

        // Insert Picture with animation
        $("#imageView").html(imgHtml);

        $("#bigImg").animate({
            height: "400px",
            width: "600px",
        },500);

    });

Просмотр изображения - это пустой div в моем теле.

В чем проблема с моим CSS?

Answer 1

Элемент id="imageView" не может иметь изображение в качестве дочернего элемента - переместить изображение наружу.

Это тот же шаблон, который jQuery UI используется при появлении модальных диалогов ...

Answer 2

Ваш фон имеет более высокий z-индекс, чем ваше изображение.Дайте изображению более высокий z-индекс, чем фон, и вы должны быть хороши.

ETA: Непрозрачность, вероятно, также наследуется от div, поэтому вы должны сбросить ее и для изображения.