CSS鼠标移动时fixed背景失效问题排查求助

问题背景 #

跟着教程开发的项目中，基础布局正常，但鼠标移动#light元素时，它的fixed背景无法保持固定。核心代码里，#light用transform: translate(-50%, -50%)做居中，同时设置了background-attachment: fixed。

原因分析 #

Chrome并没有弃用background-attachment: fixed，但当元素设置了transform属性时，会创建一个新的包含块，此时background-attachment: fixed会相对于这个元素的包含块定位，而非视口。所以移动#light时，背景会跟着元素偏移，失去固定效果。

排查步骤 #

• 临时移除#light的transform: translate(-50%, -50%)，刷新页面后移动鼠标，若背景恢复固定在视口，即可确认是transform导致的问题。
• 检查元素是否有其他会创建包含块的属性（如filter、perspective、will-change: transform等），这些属性也会干扰background-attachment: fixed的行为。

解决方案 #

方案1：移除transform，改用负margin实现居中 #

把#light的初始居中方式从transform改成负margin，避免创建新的包含块，让background-attachment: fixed正常作用于视口。

修改后的CSS：

#light {
  position: absolute;
  top: 50%;
  left: 50%;
  /* 移除transform */
  /* transform: translate(-50%, -50%); */
  /* 用负margin居中 */
  margin-top: -125px; /* 高度的一半 */
  margin-left: -125px; /* 宽度的一半 */
  width: 250px;
  height: 250px;
  z-index: 1;
  background: url(https://picsum.photos/1920/1080);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-radius: 50%;
}

方案2：用JS同步背景位置，替代background-attachment: fixed #

如果需要保留transform属性，可以去掉background-attachment: fixed，通过JS计算鼠标位置时，同步调整#light的background-position，让它和body的背景位置保持一致。

修改后的JS：

let light = document.getElementById('light');

document.onmousemove = function(e) {
  // 移动元素位置
  light.style.left = e.pageX + 'px';
  light.style.top  = e.pageY + 'px';
  // 同步背景位置，模拟fixed效果
  const bgX = -(e.pageX - window.innerWidth/2) + 'px';
  const bgY = -(e.pageY - window.innerHeight/2) + 'px';
  light.style.backgroundPosition = `${bgX} ${bgY}`;
}

对应的CSS修改：

#light {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  z-index: 1;
  background: url(https://picsum.photos/1920/1080);
  background-size: cover;
  background-position: center;
  /* 移除background-attachment: fixed */
  /* background-attachment: fixed; */
  border-radius: 50%;
}

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