Question

我不能为我的生活弄清楚如何模糊黑暗的背景而不影响我的灯箱图像。任何帮助将不胜感激，因为我仍在尝试学习如何使用：目标功能。我计划有一些不同的图像，这样当我点击每个图像时，这个灯箱效果将适用于纯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/

Answer 2

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

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

inputs中的

HTML。

页面中的任何位置都通过属性label包含在与input相关的for中。

接下来（之后）您的input代码中#overlay持有大图片，自己被包裹在label中。 #overlay当然没有站在包装纸上模糊不清。

现在，一旦有了这样的结构，就可以使用:checked ~选择器将样式应用到你想要的DOM /文档中。

DEMO但是，我不推荐使用这样一种结构，即使用CSS来加入样式就意味着更少和混乱，即使使用CSS很有趣;）

＆＃13;

: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%;
}

＆＃13;

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

＆＃13;

纯CSS灯箱与模糊的黑暗背景

2 个答案: