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

}

相关推荐
小彭努力中2 小时前
191.Vue3 + OpenLayers 实战:可控化版权信息(Attribution)详解与完整示例
前端·javascript·vue.js·#地图开发·#cesium
奇舞精选2 小时前
用去年 github 最火的 n8n 快速实现自动化推送工具
前端·agent
奇舞精选2 小时前
实践:如何为智能体推理引入外部决策步骤
前端·agent
无限大62 小时前
AI实战02:一个万能提示词模板,搞定90%的文案/设计/分析需求
前端·后端
朝阳5812 小时前
控制 Nuxt 页面的渲染模式:客户端 vs 服务端渲染
前端·javascript
发现一只大呆瓜2 小时前
Vue-Vue2与Vue3核心差异与进化
前端·vue.js·面试
sunny_2 小时前
熬夜通宵读完 VitePlus 全部源码,我后悔没早点看
前端·前端框架·前端工程化
发现一只大呆瓜3 小时前
Vue2:数组/对象操作避坑大全
前端·vue.js·面试
发现一只大呆瓜3 小时前
Vue3:ref 与 reactive 超全对比
前端·vue.js·面试
lzksword3 小时前
C++ Builder XE OpenDialog1打开多文件并显示xls与xlsx二种格式文件
java·前端·c++