用 fixed 定位 div 实现右下角半透明水印，z-index: 100 避免遮挡弹窗，JS 动态判断 hostname 或 cookie 识别测试环境，小屏降级为顶部横幅，文案明确标注如“SIT 环境”。
怎么用 CSS 实现页面右下角“测试环境”半透明水印
直接加一层 div 覆盖在页面最上层，用 position: fixed 锁定位置，配合 transform: rotate(-30deg) 和低 opacity 模拟水印效果。关键不是“多酷”，而是“不遮挡操作、不干扰调试、所有页面自动生效”。
常见错误是把水印写死在某个 HTML 文件里，结果漏掉新页面；或者用 z-index: 9999 过高，导致弹窗、代码编辑器（如 Monaco）被盖住。
- 水印
div必须放在<body>最底部，确保层级高于常规内容但低于modal类浮层（建议z-index: 100） - 文字用
font-size: 48px+line-height: 1避免换行错位 - 颜色推荐
rgba(255, 0, 0, 0.08)：红色易识别，透明度够低不刺眼，又比灰色在浅色/深色背景上都更稳 - 用
@media (max-width: 768px)降级为顶部横幅文字，避免小屏下水印挤占操作区域
如何通过 JS 动态判断当前是否为沙箱/测试环境
硬编码 "TEST" 字符串不可靠——本地开发、CI 预览、UAT、SIT 环境都可能需要不同提示。真正该读的是运行时上下文，而不是配置文件里一个开关。
优先检查 window.location.hostname，比读取 process.env.NODE_ENV 更真实：构建时变量可能被误打包进生产包，而域名不会说谎。
立即学习“前端免费学习笔记（深入）”；
- 匹配常见测试域名：
localhost、127.0.0.1、.staging.、.test.、-uat、.sandbox - 避免只判
hostname.includes("test")：万一线上域名含test（比如testimonials.example.com）就误标了 - 如果走代理或内网部署，可 fallback 到检查
document.cookie中是否存在env=test（需后端注入） - 判断逻辑封装成函数
isSandboxEnv()，返回布尔值，方便后续统一控制水印显隐和 API 请求地址切换
为什么不能只靠 meta 标签或注释做环境提示
<meta name="env" content="staging"> 或 HTML 注释 <!-- ENV: sandbox --> 对用户完全不可见，起不到警示作用；对开发者也容易被忽略——没人会每次打开 DevTools 手动翻 head。
更麻烦的是，这类标记无法触发样式或行为变化。你想让测试环境禁用支付按钮？光有 meta 没用，还得额外 JS 去读它、再绑定逻辑——不如一步到位用 JS 判断 + DOM 渲染水印 + 权限拦截三合一。
- 浏览器不解析 meta 的
content值为运行时变量，JS 必须主动document.querySelector('meta[name="env"]')才能取到，多一层脆弱依赖 - 构建工具（如 Webpack/Vite）可能在压缩时删掉注释，导致提示彻底消失
- 某些 SSR 框架（如 Next.js）中，
meta只在服务端渲染，客户端 hydration 后可能丢失，造成水印闪现或不显示
水印被截屏/录屏绕过怎么办
纯前端水印本质防君子不防小人。截图、录屏、打印 PDF 都能轻松去掉。真要防，得靠后端动态注入不可剥离的 DOM 结构（比如用 Puppeteer 截图前强制插入），或业务层限制敏感操作（如导出按钮在非生产环境置灰）。
所以前端水印的核心价值不是“防”，是“提醒”——让用户和测试同学一眼意识到“我现在点的不是线上”，避免手滑提交脏数据。
- 别花时间给水印加
user-select: none或pointer-events: none：这些属性本身就能被开发者工具禁用 - 如果团队有自动化测试平台，建议在 playwright/cypress 测试脚本里加断言：检查
document.querySelector('.env-watermark')是否存在且文本包含"TEST" - 最常被忽略的一点：水印文案必须明确写清环境类型，例如
"SIT 环境"而非模糊的"非生产环境"——不同测试环境权限差异很大，含糊其辞反而增加误操作风险
