如何通过单击当前图像外部关闭CSS3 Lightbox？

我试图通过单击当前图像的外部来关闭lightbox，但我不知道该怎么做。 我只有一个“后退”链接才能关闭这个灯箱

我只使用CSS3，也许脚本就是解决方案，谢谢你的帮助

下面是一个简短的CSS：

/*thumbnails*/
    .album {
       position: relative;
       width:1200px;
       height:auto;
       float: left;
     } 


/*fullscreen*/
    .overlay { 
       position: fixed;
       left: 258px;
       top: 0px;
       padding: 0px;
       overflow: hidden;
    } 

/*close fullscreen, back to thumbnails*/
    .close { 
       position: absolute;
       top: 50px;
       left: 50%;
    } 

HTML

您可以在

上使用伪元素。关闭
元素，并使用
z-index
将其定位在灯箱和图像之间

.overlay:target .close:before {
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.overlay { z-index: 5; }
.lightbox image { z-index: 15; }

谢谢你的回答，似乎有效，但不完全有效。事实上，我可以在当前图像外单击来关闭（太好了！）但是有一个问题，它无法返回到缩略图，它似乎停留在“关闭”内容上。@jason-b我不知道你的HTML，所以找到问题有点困难…只是编辑我的HTML，如果它能帮助你帮助我^^@jason-b
。overlay:target
应该做这项工作……非常感谢你的关注，它正在工作，很好：）
.overlay:target .close:before {
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.overlay { z-index: 5; }
.lightbox image { z-index: 15; }