本文最后更新于 2024-04-24,文章内容可能已经过时。

很多时候有些网站需要防止被盗用,或是一些信息标注,需要开启防盗防水印,下边代码直接复制到通用js中,或如果WordPress后台有自定义JS代码的地方 直接加进去即可。

全屏半透明文字水印代码

// 获取页面 DOM 元素
var documentElement = document.documentElement;
var body = document.body;
<p>// 设置水印样式
var watermarkStyle = 'position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0, 0, 0, 0.5);color:white;font-size:24px;z-index:9999;';</p>
<p>// 创建水印元素
var watermark = document.createElement('div');
watermark.style.cssText = watermarkStyle;
watermark.innerHTML = '水印文字';</p>
<p>// 添加水印到页面
documentElement.appendChild(watermark);
body.appendChild(watermark);

全屏半透明图片水印代码

<div class="watermark"></div>
.watermark {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: url('watermark-image.png') center center no-repeat;
  background-size: cover;
  opacity: 0.5;
}

首先在 HTML 中添加了一个<div>元素,并为其添加了一个类名为watermark。然后,在 CSS 中定义了该类的样式。

通过设置position:fixed将水印元素固定在页面上。top: 0; left: 0; bottom: 0; right: 0;确保水印覆盖整个页面。

background:url('watermark-image.png')指定了水印图片的路径。

opacity: 0.5;设置水印的透明度为半透明。

你需要将watermark-image.png替换为你实际的水印图片路径。