html页面打水印效果

body{

position: relative;

}

body::after {

content: ""; /* 水印文字 /
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9999;
pointer-events: none; /
允许点击穿透 */

复制代码
/* 文字样式 */
color: rgba(0, 0, 0, 0.1); /* 半透明 */
font-size: 24px;
font-weight: bold;

/* 旋转和布局 */
transform: rotate(20deg);
transform-origin: center center;
display: flex;
align-items: center;
justify-content: center;

/* 重复水印效果 */
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><text x="0" y="100" font-family="Arial" font-size="20" fill="rgba(0,0,0,0.1)" transform="rotate(-30)">星哥要的水印</text></svg>');

}

相关推荐
爱勇宝30 分钟前
办公资料反复修改、补传、交接混乱,我做了个桌面工具来解决这件事
前端·后端·程序员
微信开发api-视频号协议1 小时前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯1 小时前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen1 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
Jackson__2 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
闲猫2 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅2 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
IT_陈寒3 小时前
React的setState竟然不是立刻生效的,害我调试半天
前端·人工智能·后端
简简单单就是我_hehe3 小时前
前端埋点日志解决方案:完整 User-Agent 解析工具实现,爬虫识别、设备品牌、操作系统、浏览器版本全解析(附完整源码)
前端·爬虫
William_Xu4 小时前
Vue 2 与 Vue 3 生命周期对比
前端