是否有-webkit-mask-attachment替代方案？实现固定遮罩效果

核心思路 #

利用固定定位伪元素+背景遮罩+混合模式实现，完全依赖CSS特性，无需JS滚动监听。

实现步骤 #

• 给段落容器设置相对定位，作为伪元素的定位基准
• 用两个伪元素分层：
  • ::after生成带正常阴影的文本层，作为基础显示
  • ::before生成带替代阴影的文本层，固定在屏幕中央，通过混合模式和裁剪只在指定区域覆盖基础层
• 实际文本放在容器内，设置最高层级确保正常显示

代码示例 #

.text-container {
  position: relative;
  font-size: 24px;
  line-height: 1.6;
  padding: 20px;
  z-index: 2; /* 确保文本层级最高 */
}

/* 正常阴影文本层 */
.text-container::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 正常阴影样式 */
  z-index: 0;
}

/* 替代阴影文本层（屏幕中央区域） */
.text-container::before {
  content: attr(data-text);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  color: transparent;
  text-shadow: 0 2px 8px rgba(255,0,0,0.8); /* 替代阴影样式 */
  background: red; /* 标记生效区域，可设为transparent隐藏 */
  z-index: 1;
  mix-blend-mode: lighten; /* 让该区域阴影覆盖正常阴影 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="text-container" data-text="这里是需要显示的段落文本，内容可以很长，滚动页面时，只有屏幕中央区域会显示红色阴影，其余区域保持正常灰色阴影。重复测试：这里是需要显示的段落文本，内容可以很长，滚动页面时，只有屏幕中央区域会显示红色阴影，其余区域保持正常灰色阴影。">
  这里是需要显示的段落文本，内容可以很长，滚动页面时，只有屏幕中央区域会显示红色阴影，其余区域保持正常灰色阴影。重复测试：这里是需要显示的段落文本，内容可以很长，滚动页面时，只有屏幕中央区域会显示红色阴影，其余区域保持正常灰色阴影。
</div>

原理说明 #

• data-text属性同步伪元素与实际文本内容，避免重复编写
• 固定定位的::before始终停留在屏幕中央，不随页面滚动移动
• mix-blend-mode: lighten让指定区域的替代阴影覆盖下层正常阴影，非指定区域则显示基础层阴影
• 实际文本层级最高，不会被伪元素遮挡

调整提示 #

• 若不需要红色标记，将::before的background设为transparent即可，保留宽高限定生效范围
• 可根据需求修改阴影样式、区域尺寸和混合模式，适配不同场景

内容的提问来源于stack exchange，提问作者little dutch boy