Watermark水印组件在页面滚动时错位怎么办？

卫红 Dev 提问于 2026-03-04 21:15:19 阅读 5

组件

我用CSS实现了一个全屏水印，但页面一滚动，水印就跟着动，不是固定在视口上的。明明用了position: fixed，但还是错位了，这是为啥？

我试过把水印容器放在body最外层，也加了pointer-events: none，但滚动后水印位置明显偏移，看起来像是相对于文档而不是视口定位的。

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

我来解答赞 2 收藏

反馈

1 条解答

轩辕明明 Lv1

我之前也遇到过，fixed定位失效多半是transform的锅。检查下父级元素有没有用transform，有的话把水印移到body下。

试试这个：

body {

  position: relative;

}

.watermark {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

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

  opacity: 0.1;

  z-index: 9999;

  pointer-events: none;

  transform: none !important;

}

2026-03-05 07:00