使用CSS和HTML可实现网页水印，方法包括：一、通过background-image与data URI嵌入斜向文字水印；二、利用伪元素结合transform旋转生成叠加文字层；三、插入img标签或背景图设置固定位置图片水印；四、用Canvas绘制多行斜纹并转Base64作背景；五、通过禁用右键、屏蔽快捷键及透明遮罩限制用户复制行为，增强防护。
如果您希望在网页中添加水印以保护内容或标识来源，可以通过CSS和HTML结合的方式实现文字或图片水印。以下是几种常见的实现方法：
一、使用CSS背景属性添加文字水印
通过设置元素的背景属性，可以将文字水印平铺在整个页面或指定区域上。这种方法简单且兼容性好。
1、在CSS中定义一个类，使用background-image: linear-gradient创建斜向排列的文字水印。
2、利用data:text/plain编码方式嵌入文本，并设置透明度和角度。
立即学习“前端免费学习笔记（深入）”；
3、将该样式应用于或特定容器，使水印覆盖内容区域。
二、通过伪元素实现叠加式文字水印
使用::before或::after伪元素可以在不改变HTML结构的前提下插入水印层。
1、为目标容器添加相对定位：position: relative。
2、为伪元素设置绝对定位，使其覆盖在内容上方。
3、在伪元素中输入水印文字，调整transform: rotate(-45deg)实现倾斜效果。
4、设置opacity控制透明度，避免干扰主内容阅读。
三、插入图片水印并进行布局控制
当需要使用Logo或特定图像作为水印时，可采用内联图片或背景图形式嵌入。
1、使用
2、调整z-index值确保水印位于内容下方但可见。
3、通过width和height控制尺寸，opacity调节透明度。
四、利用Canvas动态生成文字水印背景
Canvas可以绘制自定义图案，适合生成难以复制的高强度文字水印。
1、创建一个元素并获取上下文。
2、使用fillText()方法在画布上绘制多行斜向文字。
3、将Canvas导出为Base64图像数据，赋值给页面背景：document.body.style.backgroundImage = `url(${dataUrl})`。
4、设置背景重复和平铺模式，实现全页覆盖效果。
五、限制用户行为增强水印防护效果
除了视觉呈现外，还可通过脚本阻止截图或复制行为，提升水印的保护作用。
1、禁用右键菜单：oncontextmenu="return false"防止快速保存图片。
2、监听键盘事件，屏蔽常用截图快捷键如Ctrl+P、PrintScreen等。
3、在关键内容区域添加透明遮罩层，阻止文本选中与拖拽操作。
以上就是html如何制作水印_HTML水印（文字/图片）添加与设置方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1591345.html
微信扫一扫 
支付宝扫一扫 
