使用CSS伪元素和绝对定位可实现网页水印。1. 通过::before伪元素添加“内部文档-禁止外传”内容，结合position:absolute覆盖页面；2. 设置background-size和background-position生成斜向重复纹理；3. 应用.watermark类到目标容器，利用z-index:-1和pointer-events:none确保水印不干扰交互。该方法无需JavaScript或额外HTML标签，仅靠CSS即可实现视觉水印效果。
实现网页水印效果，可以通过 CSS 伪元素配合绝对定位来完成，不需要 JavaScript 函数。虽然你说“html函数”，但实际是使用 HTML 结构和 CSS 样式协同实现的视觉效果。下面介绍如何用 ::before 或 ::after 伪元素结合绝对定位添加背景水印。
1. 使用伪元素创建水印文本
通过 CSS 的 ::before 伪元素，在页面或某个容器上插入水印内容。伪元素可以生成装饰性内容，不需额外 HTML 标签。
.watermark { position: relative; min-height: 100vh;}.watermark::before {content: "内部文档 - 禁止外传";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, rgba(200, 200, 200, 0.1) 25%, transparent 25%),linear-gradient(-45deg, rgba(200, 200, 200, 0.1) 25%, transparent 25%),linear-gradient(45deg, transparent 75%, rgba(200, 200, 200, 0.1) 75%),linear-gradient(-45deg, transparent 75%, rgba(200, 200, 200, 0.1) 75%);background-size: 100px 100px;background-position: 0 0;color: rgba(200, 200, 200, 0.8);font-size: 16px;font-weight: bold;text-align: center;line-height: 100vh;pointer-events: none; / 确保水印不阻挡鼠标事件 /z-index: -1;}
2. 应用于页面或指定区域
将上述类应用到需要加水印的容器中，比如整个 body 或某个 div：
3. 关键点说明
position: relative：确保伪元素能相对于该容器定位position: absolute：使伪元素脱离文档流，覆盖在内容背后content 属性：伪元素必须设置 content 才会显示z-index: -1：让水印位于内容下方，不影响交互pointer-events: none：允许用户点击或选择背后的文字可使用背景图、旋转文字或重复图案增强水印效果
基本上就这些。利用伪元素 + 绝对定位，无需额外标签，就能干净地实现网页水印。
以上就是html函数如何实现网页水印效果 html函数伪元素的绝对定位的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585709.html
微信扫一扫 
支付宝扫一扫 
