如何设置固定background-image仅在div内显示并实现带孔洞背景布局

看起来你卡在了fixed伪元素无法被父容器裁剪的问题上——因为position:fixed是相对于视口定位的，父元素的overflow:hidden对它完全不起作用，所以你设置的渐变背景会超出div范围，达不到“孔洞”的预期效果。

我给你几个更靠谱的实现思路，按推荐程度排序：

方案1：使用CSS遮罩（mask）实现纹理层挖空 #

这是最简洁的方案，适合大多数场景。核心思路是：

• 把radial-gradient设为body的固定背景
• 单独创建一个覆盖整个视口的纹理层（比如用body的::after伪元素），然后给这个纹理层设置mask，让孔洞区域（侧边栏、内容单元格）变成透明，露出下面的渐变背景。

示例代码：

/* 全局渐变背景 */
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 20% 50%, #2c3e50, #000);
}

/* 覆盖整个页面的纹理层 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不阻挡鼠标交互 */
  /* 替换成你的透明纹理图 */
  background-image: repeating-radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 10px);
  /* 遮罩规则：exclude表示排除指定区域（即孔洞） */
  mask: 
    /* 侧边栏孔洞：宽200px，占满高度 */
    linear-gradient(black, black) 0 0 / 200px 100% exclude,
    /* 内容单元格孔洞：固定位置的矩形区域 */
    linear-gradient(black, black) 300px 100px / 400px 200px exclude;
  /* 兼容webkit内核浏览器 */
  -webkit-mask: 
    linear-gradient(black, black) 0 0 / 200px 100% exclude,
    linear-gradient(black, black) 300px 100px / 400px 200px exclude;
}

如果孔洞是动态生成的元素，还可以用JavaScript动态生成遮罩规则，或者结合SVG遮罩实现更复杂的形状。

方案2：给孔洞元素使用固定对齐的渐变背景 #

这个思路和你的尝试接近，但解决了fixed伪元素的裁剪问题：

• 全局渐变背景设置background-attachment:fixed，确保滚动时位置不变
• 给每个孔洞元素（侧边栏、内容单元格）设置和全局完全一致的渐变背景，同样加上background-attachment:fixed，让背景和全局渐变精准对齐
• 纹理层覆盖整个页面，孔洞元素的层级在纹理层之上，用自身背景“覆盖”纹理，形成孔洞效果

示例代码：

body {
  margin: 0;
  min-height: 100vh;
  /* 全局渐变背景，固定不动 */
  background: radial-gradient(circle at 20% 50%, #2c3e50, #000);
  background-attachment: fixed;
}

/* 纹理层覆盖整个页面 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: url(你的纹理图地址);
  opacity: 0.1;
}

/* 孔洞元素：侧边栏 */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 100%;
  /* 和全局一致的渐变背景，固定对齐 */
  background: radial-gradient(circle at 20% 50%, #2c3e50, #000);
  background-attachment: fixed;
  box-shadow: 2px 0 10px rgba(0,0,0,0.3);
}

/* 孔洞元素：内容单元格 */
.content-cell {
  width: 400px;
  height: 200px;
  margin: 20px auto;
  background: radial-gradient(circle at 20% 50%, #2c3e50, #000);
  background-attachment: fixed;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

这个方案兼容性更好，不需要处理复杂的遮罩语法，适合孔洞元素数量不多、样式独立的场景。

方案3：使用CSS clip-path裁剪纹理层 #

如果你的孔洞都是规则形状（矩形、圆形），可以用clip-path直接裁剪纹理层，只保留非孔洞区域。但如果孔洞分散且数量多，clip-path的路径会非常冗长，维护成本高，仅推荐简单布局使用。

示例代码：

.texture-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(你的纹理图地址);
  /* 裁剪路径：保留除侧边栏和内容单元格外的区域 */
  clip-path: inset(0 0 0 200px) /* 排除左侧200px的侧边栏 */
             exclude inset(100px 300px calc(100vh - 300px) calc(100vw - 700px)); /* 排除内容单元格区域 */
}

总结一下，优先用方案1（CSS遮罩）实现简洁的挖空效果；如果需要兼容旧浏览器，方案2是更稳妥的选择；方案3只适合简单的固定布局场景。你之前的问题核心是fixed伪元素不受父容器裁剪，换成方案2的background-attachment:fixed就能完美解决这个问题~

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