博客网站给网页添加全屏半透明水印代码
很多时候有些网站需要防止被盗用,或是一些信息标注,需要开启防盗防水印,下边代码直接复制到通用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
替换为你实际的水印图片路径。
本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 漫川笔记
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果