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

}

相关推荐
非专业程序员3 分钟前
HarfBuzz 实战:五大核心API 实例详解【附iOS/Swift实战示例】
前端·程序员
DreamMachine9 分钟前
Flutter 开发的极简风格音乐播放器
前端·flutter
前端老宋Running16 分钟前
前端防抖与节流一篇讲清楚
前端·面试
ejinxian19 分钟前
Rust UI 框架GPUI 与 Electron 的对比
前端·javascript·electron
小马哥learn21 分钟前
Vue3 + Electron + Node.js 桌面项目完整开发指南
前端·javascript·electron
znhy@12331 分钟前
CSS3属性(三)
前端·css·css3
凌泽34 分钟前
「让规范驱动代码」——我如何用 Cursor + Spec Kit 在5小时内完成一个智能学习分析平台的
前端
omnibots37 分钟前
瑞萨SDK编译linux时,make menuconfig报错
linux·服务器·前端·嵌入式硬件
魔云连洲40 分钟前
前端树形结构过滤算法
前端·算法
前端小咸鱼一条1 小时前
19. React的高阶组件
前端·javascript·react.js