Question

<!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>

除了背景中的图像干扰了我不想要的显示图像之外，每件事情都很好。我已经检查了opacity = 1，但它隐藏了后面的所有内容。请帮助。

Answer 1

在.modal课程的css中

 opacity:0.95;

具有.modal-image类的元素是具有.modal类的元素的子元素，因此它继承了此不透明度。将.modal的不透明度更改为1，您将看不到另一个对象。

重叠的背景图像与显示的图像

1 个答案: