Question

我正在设计一个简单的静态网页，但希望这样做效果不大，但遇到了问题。

我想做什么：用照片覆盖屏幕。悬停在屏幕中央的“不可见”容器时，请模糊除容器之外的背景。

我有2层（div），“ bg”和“ overlay”。 “ bg”包含一张将填满整个屏幕的图像，而“覆盖图”是位于中心的宽度/高度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>

模糊所有（悬停）

1 个答案: