使用 CSS 或 Javascript/Jquery 超越灰度/饱和度答案

【问题标题】：See beyond grayscale/saturation using CSS or Javascrip/Jquerry使用 CSS 或 Javascript/Jquery 超越灰度/饱和度
【发布时间】：2022-09-24 21:28:35
【问题描述】：

我想要达到的目标的总结。我想让我的整个网站处于灰度或饱和度 0 和一个跟随光标的 div 以显示该“掩码”或 div 下的颜色，它就像一个掩码。

我为此尝试了不同的方法，但我无法得到它。我尝试使用带有过滤器属性或背景过滤器的 CSS。我尝试使用 Google Web Designer 找到解决方案

在 GWD 中，蒙版仅以一种方式工作，不像在 Photoshop 中那样。例如，在 Photoshop 中，您可以在顶层去除饱和度，而不是在其上放置蒙版，然后将蒙版反转以使其应用到创建的区域之外。 mask in pohotoshop

但在 GoogleWebDesigner 中，蒙版仅应用于创建的区域，您可以反转它mask in googlewebdesigner

你有其他建议如何解决这个问题吗？另一种方法

标签： javascript html jquery css google-web-designer

【解决方案1】：

这可以使用clip-path (documentation) 和backdrop-filter (documentation) 的组合来实现。这些都是相当新的，因此请检查它们是否适合您的浏览器支持要求。

大部分解释都在代码 cmets 中，不过是一个基本的总结：

在整个文档中修复一个元素，并使用backdrop-filter 使所有内容变为灰度。
使用剪辑路径仅将该过滤器应用于中心的矩形。
使用 JS 偏移元素，使中心保持在光标上方。

const cursor = document.querySelector(".cursor")
addEventListener('mousemove', e => {
  cursor.style.setProperty("--x", `${e.pageX}px`);
  cursor.style.setProperty("--y", `${e.pageY}px`);
});

/* This body style is just an example to make the demo work, it is not relevant to the solution*/
body {
  min-height: 100%;
  background-image: linear-gradient(45deg, #ff002f 10%, #2bcc33 10%, #2bcc33 20%, #0c12cc 20%, #0c12cc 30%, #0ddec6 30%, #0ddec6 40%, #d0db00 40%, #d0db00 50%, #ff002f 50%, #ff002f 60%, #2bcc33 60%, #2bcc33 70%, #0c12cc 70%, #0c12cc 80%, #0ddec6 80%, #0ddec6 90%, #d0db00 90%, #d0db00 100%);
  background-size: 141.42px 141.42px;
}

/* This container covers the page and prevent the mask from blocking clicks or making the page scrollable*/
.cursorContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

.cursor {
  /* These are set by JS and used to keep the box over the cursor */
  --x: 0px;
  --y: 0px;
  /* These are each half of the box's width and height respectively */
  --boxX: 60px;
  --boxY: 40px;
  /* These work out the boundries of the clip path from the sizes above */
  --boxUpperX: calc(50% + var(--boxX));
  --boxLowerX: calc(50% - var(--boxX));
  --boxUpperY: calc(50% + var(--boxY));
  --boxLowerY: calc(50% - var(--boxY));
  
  position: fixed;
  height: 200vh;
  width: 200vw;
  /* Use the variables above to keep this over the cursor */ 
  left: calc(-100% + var(--x));
  top: calc(-100% + var(--y));
  /* Apply the greyscale filter to the webpage behind this element */ 
  backdrop-filter: grayscale(1);
  /* Only apply that filter to this area (Basically a thick rectangle with a gap for the colour to appear through) */
  clip-path: polygon(0% 0%, 0% 100%, var(--boxLowerX) 100%, var(--boxLowerX) var(--boxLowerY), var(--boxUpperX) var(--boxLowerY), var(--boxUpperX) var(--boxUpperY), var(--boxLowerX) var(--boxUpperY), var(--boxLowerX) 100%, 100% 100%, 100% 0%);
}

<div class="cursorContainer">
  <div class="cursor"></div>
</div>

【讨论】：