时间戳

首页 > 解决方案 > 背景过滤器：不透明度（）似乎不起作用

css - 背景过滤器：不透明度（）似乎不起作用

问题描述

我正在制作一个网站，我正在寻找一种我无法复制的效果。我可能完全错了，所以我将解释我打算如何做这件事的效果，但我当然愿意接受其他观点。

  1. 将背景图像设置为 z-index：1，高度：100vh 和宽度：100vw。
  2. 将背景灰色设置为 z-index: 2, height: 100vh, width 100vw and background-color: gray;
  3. 按照我的指针将 div 设置为 z-index: 3, height: 100px, width:100px, border-radius: 50% 和背景过滤器: opacity(0);

当然，我已经简化了所有内容，我可以告诉背景过滤器正在使用其他选项，如模糊或灰度......但我不知道为什么不透明度选项似乎根本没有做任何事情。我已经阅读了背景过滤器：不透明度（）需要其他 CSS 设置，例如混合混合模式。但是我尝试了很多都没有成功。

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

标签： css

解决方案

如果你可以使用 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)

推荐阅读