漫川
Manchuan

每天都是更好的自己

漫川的学习笔记

博客网站给网页添加全屏半透明水印代码

2024-05-10 24 2

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

全屏半透明文字水印代码

// 获取页面 DOM 元素
var documentElement = document.documentElement;
var body = document.body;

// 设置水印样式
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;';

// 创建水印元素
var watermark = document.createElement('div');
watermark.style.cssText = watermarkStyle;
watermark.innerHTML = '水印文字';

// 添加水印到页面
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替换为你实际的水印图片路径。

声明:本文由漫川发布,本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

发布评论


评论(2)

 MANCHUAN BLOG