请求帮助：将Codepen鼠标移动背景变色效果改为灰度模式

Hey there! I’ve got you covered on modifying that mouse-move background color effect to grayscale mode. Here’s a straightforward breakdown of how to make this happen:

The core idea of grayscale is that the red, green, and blue channel values are identical. Instead of generating separate RGB values for color, we’ll compute a single grayscale intensity value and apply it to all three channels.

Example Code Adjustment: #

If your original JavaScript for the color effect looks something like this (generating RGB based on mouse position):

document.addEventListener('mousemove', (event) => {
  const xRatio = event.clientX / window.innerWidth;
  const yRatio = event.clientY / window.innerHeight;
  // Original color logic (generates RGB values)
  const r = Math.floor(xRatio * 255);
  const g = Math.floor(yRatio * 255);
  const b = Math.floor((xRatio + yRatio) * 127);
  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
});

Update it to generate grayscale values like this:

document.addEventListener('mousemove', (event) => {
  const xRatio = event.clientX / window.innerWidth;
  const yRatio = event.clientY / window.innerHeight;
  // Calculate a single grayscale value (adjust the formula to tweak the gradient)
  const grayIntensity = Math.floor((xRatio + yRatio) / 2 * 255);
  // Apply the same value to R, G, B channels
  document.body.style.backgroundColor = `rgb(${grayIntensity}, ${grayIntensity}, ${grayIntensity})`;
});

You can adjust the formula for grayIntensity to change how the grayscale responds to mouse movement—for example, use only xRatio or yRatio if you want the gradient to follow just the horizontal or vertical mouse position.

If you want a faster solution without modifying JavaScript, you can apply a CSS filter to convert the entire background (and any other elements) to grayscale:

body {
  /* 100% makes it fully grayscale; adjust the percentage for partial grayscale */
  filter: grayscale(100%);
}

Note: This will affect all content on the page, not just the background. Use this only if you don’t have other colored elements you want to keep as-is.

To get a specific grayscale gradient (e.g., from near-black to near-white), you can adjust the range of the intensity value. For example, to limit it to mid-tones:

// Restrict intensity to 50-200 instead of 0-255
const grayIntensity = Math.floor((xRatio + yRatio) / 2 * 150) + 50;

内容的提问来源于stack exchange，提问作者user5130727