灯箱背景模糊的问题？

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>

灯箱背景模糊的问题？

Issue with Blurring background of light box?

css

blur

lightbox

编辑

在提问者明确表示他想要不同的东西后添加

备份