模糊除悬停之外的所有内容

Question

我正在设计一个简单的静态网页，想做这个简洁的小效果但是遇到了问题。

我想做的事：用照片盖住屏幕。当悬停在屏幕中心的“不可见”容器时，模糊除容器之外的背景。

我有 2 个图层 (div)，“bg”和“叠加”。 'bg' 包含将填满屏幕的图像，而 'overlay' 是 width/height 600px/450px 容器在中心。如果我只输入“叠加层”的大小和位置，它将只是一个透视容器，当“背景”模糊时，它会看起来很模糊。

我可以在“叠加层”中使用同一张照片作为背景，这样“叠加层”就不会被透视，只是背景顶部的一张照片。这里的问题是，当我在“bg”上使用background-size: cover 时，叠加背景照片在放大/缩小（无响应）时与“bg”背景照片不匹配。

有什么办法可以解决这个问题吗？

注意：background-size: cover 第 23 行被删掉了

codepen

:root {
  --url: url(https://i.imgur.com/2N39vV4.jpg);
}

body {
  margin: 0;
  padding: 0;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--url);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-transition: 1s;
  //background-size: cover;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 37.5vw;
  height: 59.36675461741425vh;
  background: var(--url);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  -webkit-transition: 1s;
}

.overlay:hover~.bg {
  -webkit-filter: blur(15px);
}

.overlay:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, .8);
}

<div class="bg"></div>
<div class="overlay"></div>

Answer 1

在.bg 中添加一个覆盖屏幕的伪元素（::before），并且具有相同的图像和相同的位置。使用clip-path() 在中间切一个洞。当覆盖悬停时，::before

:root {
  --url: url(https://loremflickr.com/800/600);
  --c-width: 37.5vw;
  --c-height: 59.36675461741425vh;
  --c-left: calc(50% - var(--c-width) / 2);
  --c-right: calc(50% + var(--c-width) / 2);
  --c-top: calc(50% - var(--c-height) / 2);
  --c-bottom: calc(50% + var(--c-height) / 2);
}

body {
  margin: 0;
  padding: 0;
}

.bg, .bg::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--url) fixed no-repeat center;
  background-size: cover;
}

.bg::before {
  clip-path: polygon(
    0% 0%, 
    0% 100%, 
    var(--c-left) 100%, 
    var(--c-left) var(--c-top), 
    var(--c-right) var(--c-top), 
    var(--c-right) var(--c-bottom), 
    var(--c-left) var(--c-bottom), 
    var(--c-left) 100%, 
    100% 100%, 
    100% 0%
  );
  transition: filter 1s;
  transform-style: preserve-3d;
  content: '';
}

.overlay {
  position: absolute;
  top: var(--c-top);
  left: var(--c-left);
  width: var(--c-width);
  height: var(--c-height);
  z-index: 2;
  transition: box-shadow 1s;
}

.overlay:hover {
  box-shadow: 0 25px 60px rgba(0, 0, 0, .8);
}

.overlay:hover + .bg::before {
  filter: blur(15px);
}

<div class="overlay"></div>
<div class="bg"></div>