css/jQuery 中的 z-index/opacity 无法按我想要的方式工作
我正在为我的网站做一个图片查看器。显示图像存在不透明度问题。我希望图像不透明度为 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);
});
Imageview 是我体内的一个空 div。
我的 css 有什么问题？
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:
$("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);
});
Imageview is an empty div in my body.
what's the problem with my css ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
id="imageView"元素不能将图像作为子元素 - 将图像移到外部。这与弹出模式对话框时
jQuery UI使用的模式相同...The
id="imageView"element cannot have the image as a child - move the image outside.This is the same pattern
jQuery UIuses when popping modal dialogs...您的背景具有比图像更高的 z-index。给图像一个比背景更高的 z-index 就可以了。
ETA：不透明度可能也继承自 div，因此您也应该为图像重置它。
Your background has a higher z-index than your image. Give the image a higher z-index than the background and you should be good.
ETA: The opacity is probably inheriting from the div too so you should reset that for the image as well.