Question

我试图隐藏其中一个图像，它确实隐藏了其中一个图像，但是如果它没有被隐藏，它会在图像周围留下一个边框。换句话说，我希望隐藏的图像在可见图像的后面。我希望我很清楚

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="main.css" />
        <title></title>
    </head>
    <body class="body">
        <div class="box">
            <div class="imgs">
                <img id="Img2" src="IMG/2.jpg"/>
                <img id="Img1" class="hidden" src="IMG/1.jpg"/>
            </div>
        </div>
    </body>
</html>


body{
    background-color:#F0F0F0 ;
    color:#000305;/*font color*/
    font-size: 87.5%;/*87.5% out of 14px*/
    font-family: Arial,'Lucida Sans Unicode';
    line-height: 1.5;
    text-align: left;
}

.body{
    margin:0 auto;
    width:70%;
    clear:both;
}

.box{
    background-color: yellowgreen;
    margin:50px auto;
    width:80%;
    height:auto;
    border-style:solid;
    border-width:5px;
    border-color: black;
}



.imgs{
    margin:50px auto;
    width:80%;
    border-style:solid;
    border-width:5px;
    border-color: black;
}

img {
    max-width: 100%;
    display: block;

}
.hidden{
    visibility : hidden;
}

Answer 1

尝试使用display: none代替visibility: hidden。

visibility: hidden隐藏了图像，但保留了它的空间。 display: none隐藏它并且不占用任何空间的地方。

如何叠加图像

1 个答案:

Fiddle