带有模糊深色背景的纯CSS灯箱

Question

我不能为我的生活弄清楚如何在不影响我的灯箱图像的情况下模糊昏暗的背景。任何帮助将不胜感激，因为我仍然试图学习如何使用：目标功能。我计划有几个不同的图像，以便当我单击每个人时，这个灯箱效果将与纯css3一起使用。此外，任何额外的帮助，使这更多的浏览器友好没有JavaScript将是伟大的！截至目前代码的作品只是通过黑暗的背景来创建灯箱。

HTML

​​

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/

Answer 2

做到这一点VA CSS不仅是个好主意，但让我们想象它是。

要单击打开/关闭图像并在页面的不同部分触发不同样式，可以使用表单元素（如收音机（或复选框））来帮助您。

inputs就在HTML之前。

通过属性for将页面中的任意位置缩进label s与input s相关。

Somehwere next（after）input s在代码中你的#overlay持有大图像，自己包裹成label。 #overlay当然不站在包装模糊。

现在，一旦有了这样的结构，就可以使用:checked ~选择器来应用希望放置DOM /文档的样式。

DEMO但是，我不建议使用这种结构至极的意义越来越混乱，一旦风格不加载，即使它是乐趣CSS戏耍;）

:checked~.wrapper { 
 
    filter: blur(5px); 
 
} 
 

 
#overlay label { 
 
    display: none; 
 
} 
 

 
:checked ~ #overlay { 
 
    position: fixed; 
 
    background: rgba(0, 0, 0, 0.4); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 

 
#a1:checked ~ #overlay label.a1 
 
/* add each other selector here a2, a3, .... */{ 
 
    display: block; 
 
    margin: auto; 
 
    height: 80%; 
 
    width: 80%; 
 
    display: flex; 
 
} 
 

 
label img { 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    margin: auto; 
 
    vertical-align:middle; 
 
} 
 
.img { 
 
    font-size:2em; 
 
    color:red; 
 
    } 
 
.img img { 
 
    display: inline-block; 
 
} 
 

 
label { 
 
    cursor: pointer; 
 
} 
 

 
input[id^=a] { 
 
    position: absolute; 
 
    right: 120%; 
 
}

<input id="a1" type="radio" name="test" /> 
 
<!-- as any needed --> 
 

 

 
<div id="overlay"> 
 
    <label for="a" class="a1"> 
 
    <img src="http://lorempixel.com/500/500/nature/1" /> 
 
    </label> 
 
    <!-- as any needed --> 
 
    <input id="a" type="radio" name="test" /> 
 
</div> 
 
<div class="wrapper"> 
 
    <h1> test</h1> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
    <div class="img"> 
 
    My CSS lightbox image => 
 
    <label for="a1"> 
 
     <img src="http://lorempixel.com/50/50/nature/1" /> 
 
    </label> 
 
    </div> 
 
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
 
    Mauris placerat eleifend leo.</p> 
 
</div>