javascript - 具有模糊深色背景的纯 CSS 灯箱

Question

我这辈子都想不出如何在不影响我的灯箱图像的情况下模糊变暗的背景。任何帮助将不胜感激，因为我仍在努力学习如何使用 :target 功能。我计划制作一些不同的图像，这样当我单击每个图像时，此灯箱效果将适用于纯 css3。此外，任何额外的帮助都可以在没有 javascript 的情况下使浏览器更加友好!截至目前，代码仅用于创建具有透视深色背景的灯箱。

HTML

<div class="page">
<a href="#image1"><img src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" alt="" style="width: 300px; height: auto; " /></a>
</div>
<a href="#" id="image1" class="pressbox"><img   src="http://www.planwallpaper.com/static/images/20-Amazing-and-Cool-Background-For-Desktop-13.jpg" style="width: 70%; max-height:90%; " alt=""></a>

CSS

.page{
width: auto;
height: auto;
padding: 20px;
}
.pressbox {
    width: 0;
    height: 0;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
    background: rgba(0,0,0,0.7);
}
.pressbox img   {
    opacity: 0;
    padding: 10px;
    background: #ffffff;
    margin-top: 100px;
    -webkit-box-shadow: 0px 0px 15px #444;
    -moz-box-shadow: 0px 0px 15px #444; 
    box-shadow: 0px 0px 15px #444;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;   
} 
.pressbox:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
}
.pressbox:target img {
    opacity: 1;
}
.page:target {
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

Answer 1

您目前尝试实现的目标仅靠 CSS 是不可能的，但它即将实现。

https://webkit.org/blog/3632/introducing-backdrop-filters/