灯箱背景模糊有问题吗？

Question

我正在尝试为灯箱创建模糊的背景效果，并且滤镜模糊css不起作用，而是使整个灯箱模糊。

任何帮助将不胜感激。

我的代码不是CSS的javascript，而且在不模糊前景的情况下似乎无法正常工作。

我已经尝试过模糊滤镜，并且我认为单击灯箱图像后，这不适用于页面。

Image showing blurred foreground and clear background

.container
{
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.small
{
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: .6s ease;
  filter: brightness(95%);
 }
.small:hover
{
  transform: scale(1.03);
  transition: .15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}
.lightbox
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.825);
  filter: blur(5px);
}
a div
{
 position: relative;
 margin: auto auto;
 text-align: center;
}

.lightbox:target
{
display: flex;
}

<div class="container">
 <a href="#img1"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
</a>
 <a href="#img2"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
 <a href="#img3"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
</a>
  <a href="#img4"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img5"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img6"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img7"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img8"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img9"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img10"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img11"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img12"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>

  <a href="#_" class="lightbox" id="img1">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 12 -</h6>
      <h4>This traditional extension  in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img2">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 11 -</h6>
      <h4>This contemporary dormer extension  in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img3">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 10 -</h6>
      <h4>This contemporary extension  in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img4">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Huddersfield _ December 2018</h3>
      <h6>- 9 -</h6>
      <h4>This contemporary garden room  in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against the wall.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img5">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Leeds _ November 2018</h3>
      <h6>- 8 -</h6>
      <h4>This contemporary extension  in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img6">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ August 2018</h3>
      <h6>- 7 -</h6>
      <h4>This traditional garden room  in Barnsley was designed to replace existing outhouses and to make use of the sunlight to the rear of the garden. This project also involved the redesign of the parking to the rear of the property.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img7">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ July 2018</h3>
      <h6>- 6 -</h6>
      <h4>This contemporary extension  in Barnsley has a cedar cladding section over a corner of glazing to allow for views of the garden, it also has a raised patio to allow for level access to a seating area.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img8">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ June 2018</h3>
      <h6>- 5 -</h6>
      <h4>This traditional extension  in Barnsley is on the ground floor and extends the kitchen to create a open plan layout and also emulates the traditional style of the house.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img9">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Visual | Huddersfield _ May 2018</h3>
      <h6>- 4 -</h6>
      <h4>This visual ‍ was created to depict the rear of a traditional new build home, that has a contemporary extension in Huddersfield. The house was designed by Northern Design Partnership in Holmfirth.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img10">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Holmfirth _ March 2018</h3>
      <h6>- 3 -</h6>
      <h4>This contemporary garden room  in Holmfirth was designed to provide a space for guests to stay in while also having a small shower room behind the stone cladding.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img11">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Porch | Huddersfield _ June 2017</h3>
      <h6>- 2 -</h6>
      <h4>This traditional stone clad porch  in Huddersfield was designed and had building drawings produced by us. It emulates the traditional style of the property and uses the same materials.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img12">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ July 2016</h3>
      <h6>- 1 -</h6>
      <h4>These visuals depict the interior of a contemporary garden room  in Barnsley and it provides a space for guests to stay in while also doubling up as a painting room.</h4>
    </div>
 
  </a>
  </div>

Answer 1

编辑

在问问者明确表示他想要其他东西之后添加

如果要使整个背景模糊，则需要更改HTML结构。由于您对:target伪元素做出反应以显示灯箱，因此您需要让元素对所示的灯箱做出反应，然后跟随灯箱以使用general siblings combinator ~。因此，所有灯箱必须在.container元素之前，并且.container元素是模糊的，如果在定位之前有.lightbox。

.container {
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: filter .3s linear;
}

.small {
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: 0.6s ease;
  filter: brightness(95%);
}

.small:hover {
  transform: scale(1.03);
  transition: 0.15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}

.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.825);
}
.lightbox:target {
  display: flex;
}
.lightbox:target ~ .container {
  transition: filter 1s linear;
  filter: blur(5px);
}

a div {
  position: relative;
  margin: auto auto;
  text-align: center;
}

<a href="#_" class="lightbox" id="img1">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 12 -</h6>
    <h4>This traditional extension  in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img2">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 11 -</h6>
    <h4>This contemporary dormer extension  in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img3">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%" />
    <h3>Extension | Barnsley _ December 2018</h3>
    <h6>- 10 -</h6>
    <h4>This contemporary extension  in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img4">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Garden Room | Huddersfield _ December 2018</h3>
    <h6>- 9 -</h6>
    <h4>This contemporary garden room  in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against
      the wall.</h4>
  </div>
</a>

<a href="#_" class="lightbox" id="img5">
  <div>
    <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%" />
    <h3>Extension | Leeds _ November 2018</h3>
    <h6>- 8 -</h6>
    <h4>This contemporary extension  in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
  </div>
</a>


<div class="container">
  <a href="#img1"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
  </a>
  <a href="#img2"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>
  <a href="#img3"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
  </a>
  <a href="#img4"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>
  <a href="#img5"> 
    <img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
  </a>


</div>

备份

这不是问询者想要的 您只需要将模糊滤镜限制为图像即可。 因此，

.lightbox {
  /* ... */
  filter: blur(5px);
}

执行此操作

.lightbox img {
  /* ... */
  filter: blur(5px);
}

.container
{
  width: 100%;
  margin-top: 6px;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.small
{
  height: 180px;
  width: 320px;
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  transition: .6s ease;
  filter: brightness(95%);
 }
.small:hover
{
  transform: scale(1.03);
  transition: .15s ease;
  opacity: 1;
  -moz-opacity: 100%;
  -webkit-opacity: 100%;
  filter: brightness(100%);
}
.lightbox
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.825);
}
.lightbox img {
  filter: blur(5px);
}
a div
{
 position: relative;
 margin: auto auto;
 text-align: center;
}

.lightbox:target
{
display: flex;
}

<div class="container">
 <a href="#img1"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg">
</a>
 <a href="#img2"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
 <a href="#img3"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg">
</a>
  <a href="#img4"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img5"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img6"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img7"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img8"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img9"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img10"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img11"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>
  <a href="#img12"> 
<img class="small" src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg">
</a>

  <a href="#_" class="lightbox" id="img1">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/1.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 12 -</h6>
      <h4>This traditional extension  in Barnsley redesigns the house layout from an existing small kitchen and seperate dining room to create a large open plan space.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img2">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 11 -</h6>
      <h4>This contemporary dormer extension  in Barnsley converts the attic of a bungalow, creating two large bedrooms and a bathroom and is clad in dark grey uPVC panelling.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img3">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/3.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ December 2018</h3>
      <h6>- 10 -</h6>
      <h4>This contemporary extension  in Barnsley has a white render finish around the corner of the front gable of a bungalow and this allows for the repositioning of the front door without the need for matching brickwork.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img4">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Huddersfield _ December 2018</h3>
      <h6>- 9 -</h6>
      <h4>This contemporary garden room  in Huddersfield is clad in treated timber panels over a band of brickwork, it also has a set of bi-folding doors and full and mid height windows to allow for views of the garden and a space to put a desk against the wall.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img5">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Leeds _ November 2018</h3>
      <h6>- 8 -</h6>
      <h4>This contemporary extension  in Leeds has a white render finish over a band of painted brickwork, it also has a corner of glazing to allow for views and access to the garden.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img6">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ August 2018</h3>
      <h6>- 7 -</h6>
      <h4>This traditional garden room  in Barnsley was designed to replace existing outhouses and to make use of the sunlight to the rear of the garden. This project also involved the redesign of the parking to the rear of the property.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img7">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ July 2018</h3>
      <h6>- 6 -</h6>
      <h4>This contemporary extension  in Barnsley has a cedar cladding section over a corner of glazing to allow for views of the garden, it also has a raised patio to allow for level access to a seating area.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img8">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Extension | Barnsley _ June 2018</h3>
      <h6>- 5 -</h6>
      <h4>This traditional extension  in Barnsley is on the ground floor and extends the kitchen to create a open plan layout and also emulates the traditional style of the house.</h4>
    </div>
 </a>

  <a href="#_" class="lightbox" id="img9">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Visual | Huddersfield _ May 2018</h3>
      <h6>- 4 -</h6>
      <h4>This visual ‍ was created to depict the rear of a traditional new build home, that has a contemporary extension in Huddersfield. The house was designed by Northern Design Partnership in Holmfirth.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img10">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Holmfirth _ March 2018</h3>
      <h6>- 3 -</h6>
      <h4>This contemporary garden room  in Holmfirth was designed to provide a space for guests to stay in while also having a small shower room behind the stone cladding.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img11">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Porch | Huddersfield _ June 2017</h3>
      <h6>- 2 -</h6>
      <h4>This traditional stone clad porch  in Huddersfield was designed and had building drawings produced by us. It emulates the traditional style of the property and uses the same materials.</h4>
    </div>
 
  </a>
  <a href="#_" class="lightbox" id="img12">
    <div>
      <img src="http://www.arcadearchitecture.co.uk/img/projects/2.jpg" width="67.5%"/>
      <h3>Garden Room | Barnsley _ July 2016</h3>
      <h6>- 1 -</h6>
      <h4>These visuals depict the interior of a contemporary garden room  in Barnsley and it provides a space for guests to stay in while also doubling up as a painting room.</h4>
    </div>
 
  </a>
  </div>