Javascript 背景图像与显示图像重叠 #img1：悬停{ 不透明度：0.6； } .莫代尔{ 位置：固定； 排名：0； 左：0； 宽度：100%； 身高：100%； 背景色：rgb（0,0,0）； 填充顶部：100px； 不透明度：.95； 显示：无； z指数：1； } .结束{ 浮动：对； 填充：20px 30px； 字体系列：Arial； 字体大小：30px； 颜色：灰色； } .关闭：悬停{ 光标：指针； } .模态图像{ 宽度：100%； 最大宽度：800px； 不透明度：1； 显示：块； 保证金：自动； 动画名称：imageTransform； 动画持续时间：0.8s； } @关键帧图像变换{ 从{transform:scale（0）；} 到{变换：比例（1）；} } X
除了背景中的图像干扰了我不想显示的图像外，其他一切都正常。我已经检查了不透明度=1，但它隐藏了后面的所有内容。请帮助。在css中为您的Javascript 背景图像与显示图像重叠 #img1：悬停{ 不透明度：0.6； } .莫代尔{ 位置：固定； 排名：0； 左：0； 宽度：100%； 身高：100%； 背景色：rgb（0,0,0）； 填充顶部：100px； 不透明度：.95； 显示：无； z指数：1； } .结束{ 浮动：对； 填充：20px 30px； 字体系列：Arial； 字体大小：30px； 颜色：灰色； } .关闭：悬停{ 光标：指针； } .模态图像{ 宽度：100%； 最大宽度：800px； 不透明度：1； 显示：块； 保证金：自动； 动画名称：imageTransform； 动画持续时间：0.8s； } @关键帧图像变换{ 从{transform:scale（0）；} 到{变换：比例（1）；} } X,javascript,html,css,Javascript,Html,Css,除了背景中的图像干扰了我不想显示的图像外，其他一切都正常。我已经检查了不透明度=1，但它隐藏了后面的所有内容。请帮助。在css中为您的.modal类提供帮助 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style> #img1:hover{ opa
.modal<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
#img1:hover{
opacity:0.6;
}
.modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color: rgb(0,0,0);
padding-top:100px;
opacity:.95;
display:none;
z-index:1;
}
.close{
float:right;
padding:20px 30px;
font-family:Arial;
font-size:30px;
color:gray;
}
.close:hover{
cursor:pointer;
}
.modal-image{
width:100%;
max-width:800px;
opacity:1;
display:block;
margin:auto;
animation-name:imageTransform;
animation-duration:0.8s;
}
@keyframes imageTransform{
from{transform:scale(0);}
to{transform:scale(1);}
}
</style>
</head>
<body>
<img id="img1"src="image.jpg" onclick="myDisplay()" width="400px" height="300px"/>
<div class="modal">
<span class="close">X</span>
<img class="modal-image" id="img2"/>
</div>
<script>
var v = document.getElementsByClassName('modal')[0];
var i = document.getElementById('img1');
var s = document.getElementsByClassName('close')[0];
var k = document.getElementById('img2');
function myDisplay()
{
v.style.display = "block";
k.src = i.src;
}
s.onclick = function close()
{
v.style.display = "none";
}
</script>
</body>
</html>
具有
.modal image.modal.modal{background color:rgba（0,0,0,0.95）；} opacity:0.95;