Question

我正在制作一个网站，我正在寻找一种无法重现的效果。我可能把这一切都弄错了，所以我将解释我计划如何做这件事的效果，但我当然愿意接受其他观点。

效果：我有一个背景图像（整个屏幕），我用深灰色覆盖了它。我的鼠标指针后面还有一个 100 x 100 像素的圆形 div。我的目标是让这个圆形 div 成为一种“窗口”，可以穿透深灰色，从而在鼠标移动时显示背景图像。
我的方法：

将背景图像设置为 z-index: 1，高度：100vh 和宽度：100vw。
将背景灰色样式设置为 z-index: 2，高度：100vh，宽度 100vw 和背景颜色：灰色；
按照我的指针将 div 设置为 z-index: 3，height: 100px，width:100px，border-radius: 50% 和 background-filter: opacity(0);

当然，我已经简化了一切，我可以看出背景过滤器正在使用其他选项，例如模糊或灰度……但我不知道为什么不透明度选项似乎什么也没做。我读过背景过滤器：opacity() 需要其他 CSS 设置，如混合模式。但是我尝试了很多都没有成功。

我知道我现在只考虑 CSS，因此我愿意接受其他建议，无论是否使用 CSS。如果您需要更多详细信息，请不要犹豫。我将在 codeSandBox 上做一个例子并编辑我的帖子以使其更容易理解。

Answer 1

如果你可以使用 Js 这将工作

let image = document.querySelector('#image');
document.body.addEventListener('mousemove', e => {
  image.style.clipPath =
    `circle(100px at ${e.pageX}px ${e.pageY}px)`;
});

body {
  margin: 0;
}

#background {
  width: 100vw;
  height: 100vh;
  background: rgba(24, 24, 24);
  position: fixed;
}

#image {
  width: 100vw;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1542831371-29b0f74f9713") no-repeat;
  background-size: contain;
  background-position: center;
  position: fixed;
  clip-path: polygon(0 0);
  cursor: none;
}

<div id="background"></div>
<div id="image"></div>

它的工作原理基本上是在触发 clip-path 事件时更新 mousemove 属性。

编辑：

我假设你不知道 Js，所以我会补充说你可以通过改变这条线来玩圆形的大小（甚至它的形状）：

circle(100px at ${e.pageX}px ${e.pageY}px)

到

circle(75px at ${e.pageX}px ${e.pageY}px)

甚至这个

polygon(${e.pageX}px ${e.pageY + 25}px, ${e.pageX - 25}px ${e.pageY - 25}px, ${e.pageX + 25}px ${e.pageY - 25}px)

Answer 2

确保 z-index 有效。请记住，它仅适用于定位元素，这意味着如果您的背景图像和 div 没有“位置”属性，则不会考虑 z-index。

背景过滤器：opacity() 似乎不起作用

2 个答案: