初学者如何用CSS3快速给网页右下角添加水印背景？-css教程-PHP中文网

用::after而非background-image可直接写文本、支持CSS变量动态替换、无需切图；右下角定位用right/bottom比transform更直观，需设pointer-events:none防遮挡交互。

初学者如何用css3快速给网页右下角添加水印背景？

直接用 ::after 伪元素 + position: fixed 就能搞定，不用图片、不改HTML结构，5行CSS起手。

为什么用 `::after` 而不是 `background-image`？

右下角水印常要带文字（如“内部资料”“USER@DOMAIN”），background-image 得提前切图、换内容就得重做；而 ::after 的 content 可直接写文本，支持 CSS 自定义属性动态替换，调试也快。注意：别用 ::before —— 它默认在 DOM 顺序最前，容易被其他 z-index 覆盖出错。

position: fixed 确保滚动时水印始终贴右下，不随内容位移
right: 20px; bottom: 20px 比 transform: translate() 更直观可控，避免旋转后定位偏移
必须设 pointer-events: none，否则鼠标悬停右下角会意外触发水印元素的事件（比如遮挡按钮）

`opacity` 和 `color` 怎么配才不抢眼？

透明度不是越低越好：opacity: 0.05 在浅色背景上几乎看不见，opacity: 0.3 又太实。实测 color: rgba(0, 0, 0, 0.12)（纯黑+12% alpha）在多数背景色下都清晰可辨且不干扰阅读。字体大小建议用 14px 或 0.875rem，太大易误判为 UI 元素，太小打印时消失。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

别只调 opacity —— 它会让子元素（如有）也变透明；用 rgba() 控制颜色透明度更精准
避免用 font-weight: bold，加粗文字在低透明度下边缘发虚，影响可读性
如果页面有深色模式，记得加媒体查询：@media (prefers-color-scheme: dark) { color: rgba(255, 255, 255, 0.12); }

如何防止水印被开发者工具一键删掉？

单纯靠 CSS 伪元素的水印，打开 DevTools → Elements 面板删掉 ::after 规则就没了。真要增加点门槛，可以结合 JS 动态注入样式：

const style = document.createElement('style');
style.textContent = `
  body::after {
    content: "${encodeURIComponent('内部资料 - ' + new Date().getFullYear())}";
    position: fixed;
    right: 20px;
    bottom: 20px;
    color: rgba(0, 0, 0, 0.12);
    font-size: 14px;
    pointer-events: none;
    z-index: 9999;
  }
`;
document.head.appendChild(style);