HTML中添加水印可通过CSS背景或JavaScript实现，前者简单高效适用于静态水印，后者灵活且具一定防篡改能力，但复杂度较高。
HTML中添加水印通常通过CSS的背景图片属性或者JavaScript动态生成元素来实现。这两种方法各有侧重，前者更适用于静态、重复性水印，后者则能实现更灵活、防篡改的效果，但实现复杂度会相应增加。
解决方案
要给HTML内容添加水印，我们通常会用到CSS和JavaScript的组合拳。一个比较常见且灵活的方案是：利用CSS将一个半透明的水印图片或文字图案作为背景平铺，同时结合JavaScript来动态生成或增强水印的防篡改能力。
方案一：基于CSS的背景平铺水印 (简单高效)
这种方法适用于静态、重复性水印，性能好，实现起来也最直接。
立即学习“前端免费学习笔记（深入）”；
准备水印图案：创建一个小尺寸、半透明的图片（可以是文字、Logo或图案），例如watermark.png。图片内容应清晰，但透明度要足够高，以免干扰主要内容。如果你不想用图片，也可以直接用CSS生成一个带有文字的div，然后把它作为背景。
HTML结构：通常我们会将水印应用到页面的某个容器或body元素上。
带水印的页面 这是一篇重要的文章标题
这里是文章的主要内容，非常重要，不希望被随意复制。
通过CSS背景平铺的方式，我们可以很方便地给整个页面或特定区域添加水印。
它不会干扰DOM结构，性能也很好。
CSS样式：在style.css中，我们可以这样设置：
body, html { height: 100%; margin: 0; padding: 0;}.content-wrapper { position: relative; /* 确保水印能在其上方或内部 */ min-height: 100vh; /* 确保内容区域足够高 */ background-image: url('path/to/watermark.png'); /* 替换为你的水印图片路径 */ background-repeat: repeat; /* 让水印图片平铺 */ background-size: 200px 100px; /* 控制水印图片的大小，根据实际情况调整 */ opacity: 0.1; /* 调整水印的透明度，使其不影响阅读 */ /* 或者使用rgba颜色来设置背景色和透明度，如果水印是纯色块 */ /* background-color: rgba(0, 0, 0, 0.05); */ /* 确保水印不会阻碍鼠标事件，这很重要！ */ pointer-events: none; z-index: -1; /* 将水印置于内容下方 */ position: fixed; /* 固定水印，不随滚动条移动 */ top: 0; left: 0; width: 100%; height: 100%;}/* 实际内容层，确保它在水印之上 */.content-wrapper > * { position: relative; z-index: 1; /* 确保内容在水印之上 */ pointer-events: auto; /* 恢复内容的鼠标事件 */}/* 另一种更简单的做法，直接给body加水印，内容不受影响 */body { background-image: url('path/to/watermark.png'); background-repeat: repeat; background-size: 200px 100px; opacity: 0.1; /* 注意：直接给body加opacity会影响所有内容，所以通常我们会把水印放在一个独立的伪元素或div里 */}/* 推荐做法：使用伪元素创建水印层，不影响内容透明度 */body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('path/to/watermark.png'); background-repeat: repeat; background-size: 200px 100px; opacity: 0.1; pointer-events: none; /* 确保水印不阻挡鼠标事件 */ z-index: -1; /* 将水印置于内容下方 */}
方案二：基于JavaScript动态生成水印 (更灵活，一定程度防篡改)
这种方法可以动态生成文字水印，并将其平铺在页面上，甚至可以添加一些简单的防篡改逻辑。
HTML结构：和上面类似，但不再需要预设水印CSS。
JavaScript代码：我们可以编写一个函数来生成水印，并在页面加载时调用它。
// watermark.jsfunction createWatermark(settings) { const defaultSettings = { watermark_txt: "请勿复制", watermark_x: 20, // 水印起始X坐标 watermark_y: 20, // 水印起始Y坐标 watermark_rows: 0, // 水印行数，0表示自动 watermark_cols: 0, // 水印列数，0表示自动 watermark_x_space: 100, // 水印X轴间隔 watermark_y_space: 50, // 水印Y轴间隔 watermark_font: '20px Microsoft YaHei', // 水印字体 watermark_color: '#000', // 水印颜色 watermark_alpha: 0.1, // 水印透明度 watermark_width: 150, // 水印宽度 watermark_height: 80, // 水印高度 watermark_angle: -15 // 水印倾斜角度 }; const config = { ...defaultSettings, ...settings }; const body = document.body; const documentWidth = Math.max(body.scrollWidth, body.clientWidth); const documentHeight = Math.max(body.scrollHeight, body.clientHeight); // 计算水印行数和列数 if (config.watermark_rows === 0) { config.watermark_rows = Math.ceil(documentHeight / (config.watermark_y_space + config.watermark_height)); } if (config.watermark_cols === 0) { config.watermark_cols = Math.ceil(documentWidth / (config.watermark_x_space + config.watermark_width)); } let x = config.watermark_x; let y = config.watermark_y; for (let i = 0; i < config.watermark_rows; i++) { y = config.watermark_y + (config.watermark_y_space + config.watermark_height) * i; for (let j = 0; j { createWatermark({ watermark_txt: "内部资料 严禁外传 - " + new Date().toLocaleDateString(), watermark_color: '#ccc', watermark_alpha: 0.08, watermark_angle: -20 }); // 简单的防篡改：监听水印元素是否被移除，如果被移除就重新生成 // 注意：这种方式并不能完全防住有心人，但能提高门槛 const observer = new MutationObserver(mutations => { mutations.forEach(mutation => { if (mutation.type === 'childList' && mutation.removedNodes.length > 0) { mutation.removedNodes.forEach(node => { if (node.nodeType === 1 && node.classList.contains('js-watermark')) { console.warn('水印被移除，尝试重新生成...'); // 移除所有旧水印，防止重复生成 document.querySelectorAll('.js-watermark').forEach(wm => wm.remove()); createWatermark({ watermark_txt: "内部资料 严禁外传 - " + new Date().toLocaleDateString(), watermark_color: '#ccc', watermark_alpha: 0.08, watermark_angle: -20 }); } }); } }); }); observer.observe(document.body, { childList: true, subtree: true });});
在HTML中引入这个JS文件：
带水印的页面 body { margin: 0; padding: 0; min-height: 100vh; } .content { padding: 20px; }这是一篇重要的文章标题
这里是文章的主要内容，通过JavaScript动态生成水印，可以实现更灵活的控制。
水印可以包含动态信息，比如日期、用户ID等。
这种方式在一定程度上可以防止水印被轻易删除。
为什么在HTML中添加水印？它能带来哪些实际好处？
在HTML中加入水印，很多时候更像是一种“君子协定”式的声明，但它确实能带来一些实际的好处。我个人觉得，虽然真正要防住有心人很难，但至少能提高门槛，让那些随手复制粘贴的人有所顾忌，同时也是一种明确的版权宣告。
内容保护与版权声明： 最直接的目的就是宣示内容的所有权。水印就像一个数字签名，明确告诉访问者这份内容是受保护的，未经授权请勿随意使用。这对于原创文章、设计稿、重要文档等尤其有意义。品牌识别与推广： 即使你的内容被他人截图、复制，水印也能将你的品牌Logo或名称一同带走。这在某种程度上扩大了品牌曝光，即使内容被盗用，也能留下你的印记。防止截图盗用： 对于一些敏感信息、未发布的图片或设计稿，水印可以增加盗用的成本。虽然截图无法完全避免，但带有水印的截图在传播时会显得不那么“干净”，降低其价值。内部文档追踪与溯源： 在企业内部，给流转的文档页面加上带有用户ID、时间戳的水印，可以在一定程度上追踪文档的泄露源头。这对于保密性要求高的资料管理非常有帮助。提升专业度： 有水印的页面，尤其是一些报告、合同或预览页，会显得更加专业和正式，给用户一种严谨、规范的印象。
实现HTML水印有哪些常见技术方案？它们各自的优缺点是什么？
在实际操作中，实现HTML水印有几种主要的技术方案，每种方案都有其适用场景和优缺点。我在实际项目中，如果只是简单需求，CSS背景图是首选。但要是遇到一些“老板要求水印不能被轻易去掉”的情况，JS配合Canvas就成了更可靠的方案，虽然代码量会多一些。
CSS背景图法：
原理： 创建一个半透明的水印图片（或使用linear-gradient等CSS属性模拟），然后将其作为背景图应用到页面的body、某个容器或伪元素上，并设置为平铺。优点：实现简单： 只需要几行CSS代码即可完成。性能好： 不会增加DOM节点，对页面渲染性能影响极小。不影响DOM结构： 水印与内容分离，不会干扰页面布局和用户交互（如果设置了pointer-events: none）。缺点：易被移除： 熟悉前端的开发者可以轻松通过浏览器开发者工具禁用或修改CSS样式，从而移除水印。样式固定： 水印内容和样式通常是静态的，难以动态调整。图片资源： 需要额外的图片文件，增加了HTTP请求。
JavaScript动态生成DOM法：
原理： 使用JavaScript在页面加载后，动态创建多个div元素，将水印文本或图片作为这些div的内容，并通过CSS定位和样式（如transform旋转、opacity透明度）将其平铺在页面上。优点：灵活性高： 可以动态调整水印内容（如加入当前时间、用户ID）、样式、位置等。一定程度防篡改： 可以结合MutationObserver等API监听水印元素的移除或修改，一旦发现异常就重新生成，增加移除难度。无需图片： 可以直接生成文字水印，减少HTTP请求。缺点：增加DOM节点： 会在页面中生成大量的div元素，可能对复杂页面的DOM性能有轻微影响。JS依赖： 依赖JavaScript执行，如果JS被禁用，水印将无法显示。性能开销： 动态生成和维护大量DOM元素会带来一定的CPU开销，尤其是在页面内容变化时需要重新计算水印位置。
Canvas绘图法：
原理： 创建一个canvas元素，使用JavaScript在其上绘制水印文本或图片，然后将canvas元素作为背景或覆盖层添加到页面上。优点：水印内容难以直接选中或复制： 因为水印是作为位图绘制在canvas上的，用户无法直接选中或复制其中的文本。可以生成复杂图形和文字： canvas提供了强大的绘图API，可以实现更复杂、更精细的水印效果。性能相对较好： 一旦水印绘制完成，canvas本身作为一个整体元素，对页面渲染性能影响较小。缺点：需要JavaScript支持： 同样依赖JS执行。兼容性考虑： 较老的浏览器可能不支持canvas。水印内容不可访问性： 对屏幕阅读器等辅助技术不友好，因为水印内容不是DOM文本。实现复杂度高： 相较于CSS背景图，需要更多的JS代码来控制绘图逻辑。
SVG水印法 (作为补充)：
原理： 使用SVG（可缩放矢量图形）定义水印的图形和文本，然后
以上就是HTML加水印代码怎么写_HTML加水印代码编写详细教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580216.html
微信扫一扫 
支付宝扫一扫 
