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>');

}

相关推荐
roamingcode29 分钟前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS30 分钟前
NPM模块化总结
前端·javascript
灵感__idea1 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro1 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron
陪我一起学编程2 小时前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
LinXunFeng3 小时前
Flutter - 详情页初始锚点与优化
前端·flutter·开源
GISer_Jing3 小时前
Vue Teleport 原理解析与React Portal、 Fragment 组件
前端·vue.js·react.js
Summer不秃3 小时前
uniapp 手写签名组件开发全攻略
前端·javascript·vue.js·微信小程序·小程序·html
coderklaus3 小时前
Base64编码详解
前端·javascript
NobodyDJ4 小时前
Vue3 响应式大对比:ref vs reactive,到底该怎么选?
前端·vue.js·面试