I am doing a picture viewer for my website. There is a problem of opacity with the displayed image. I want my image opacity to 100% and my black background to 80% instead of:I tried to set opacity directly on my image, but It didn't work.
I have this jQuery function:\[code\]$("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 = http://stackoverflow.com/questions/9424600/$(this).attr("src").split("/"); var imgName = miniSrc[miniSrc.length - 1]; var bigSrc = "http://stackoverflow.com/questions/9424600/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); });\[/code\]Imageview is an empty div in my body.what's the problem with my css ?