Watermark水印组件在滚动时位置错乱怎么办？

迷人的翌喆提问于 2026-02-24 16:36:20 阅读 49

组件

我用了一个Watermark水印组件，页面一滚动水印就跟着跑偏了，明明设置的是固定定位，但看起来像是相对文档流在动。试过加position: fixed到水印容器上，但没效果。

这是我的水印样式代码：

.watermark {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg ... />');
  background-repeat: repeat;
  z-index: 9999;
}

是不是哪里写错了？为啥滚动时水印还在动？

我来解答赞 3 收藏

反馈

1 条解答

小东芳 Lv1

问题在于你把水印容器设为 fixed 但背景图用的是 data URI 的 SVG，浏览器在滚动时会重新渲染 data URI 的背景，导致视觉上“错乱”。解决方案是把水印元素包裹在一个 fixed 容器里，或者更稳妥地用 JS 动态插入水印节点到 body 底部，并确保其父级没有 transform 或 filter 影响定位。直接改这个结构就行：

<body>

  <!-- 你的页面内容 -->

  <div id="watermark" class="watermark"></div>

</body>

.watermark {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  pointer-events: none;

  z-index: 9999;

  background-image: url('data:image/svg+xml;utf8,');

  background-repeat: repeat;

  background-attachment: fixed; /* 关键：强制背景不随滚动 */

}

2026-02-24 17:05