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

}

相关推荐
我是伪码农7 小时前
Vue 1.23
前端·javascript·vue.js
毕设源码-郭学长12 小时前
【开题答辩全过程】以 基于Web的高校课程目标达成度系统设计与实现为例,包含答辩的问题和答案
前端
wuhen_n12 小时前
高阶函数与泛型函数的类型体操
前端·javascript·typescript
ヤ鬧鬧o.14 小时前
多彩背景切换演示
前端·css·html·html5
lethelyh14 小时前
Vue day1
前端·javascript·vue.js
酉鬼女又兒14 小时前
SQL113+114 更新记录(一)(二)+更新数据知识总结
java·服务器·前端
无风听海14 小时前
AngularJS中 then catch finally 的语义、执行规则与推荐写法
前端·javascript·angular.js
利刃大大14 小时前
【Vue】组件化 && 组件的注册 && App.vue
前端·javascript·vue.js
一起养小猫14 小时前
Flutter for OpenHarmony 实战:按钮类 Widget 完全指南
前端·javascript·flutter
css趣多多14 小时前
Vux store实例的模块化管理
前端