上周有个做建材的朋友老张，急匆匆找我喝茶。他那个展示案例的官网，被同行爬了图，连logo都没去，直接挂到自己网站上卖货。老张气得拍桌子，问我：“这网站上面的水印怎么做的？能不能搞个动态的，让人看着烦又去不掉？”

说实话，以前我也爱用PS批量加水印，或者让设计师在每张图上叠一层半透明logo。但这法子太土，还占服务器带宽，加载慢得要死。现在做网站，讲究个体验和效率，老张这需求，完全可以用前端技术解决。

其实，网站上面的水印怎么做的，核心思路就俩：要么在图片加载前就处理，要么用代码在页面上“盖”一层。老张想要那种“去不掉”的效果，我给他推荐了CSS+JS结合的方案。这玩意儿就像给网页穿了件隐形衣，看着清爽，实际防护到位。

咱们先说最简单的CSS背景图法。适合那种固定布局的后台系统或者展示页。你准备一张带有公司Logo和淡淡文字的水印PNG，透明度设低点，比如10%到20%，别太抢戏。然后在CSS里用background-repeat: repeat;平铺全屏。这招成本低，代码少，老张一听就懂。但缺点也明显，懂行的技术人员右键就能关掉样式，水印就没了。

所以，更稳妥的办法是用JavaScript动态生成。这就是很多大厂的做法。原理也不复杂，就是让JS在页面加载时，创建一个div或者canvas，里面写上你的水印文字，比如“仅供内部参考”或者公司名，然后把这个层绝对定位在整个页面的最顶层，pointer-events: none; 让鼠标能穿透它，不影响用户点击下面的链接或按钮。

我上次给一个电商客户做的时候，就是这样搞的。我们在每个商品详情页加了斜向排列的“© 2024 某某科技”水印。效果咋样？用户浏览时几乎无感，但一旦截图，水印就在图上。关键是，这水印是DOM元素，不是图片的一部分，右键另存为存不下来原图。老张试了试，直呼过瘾，说这比让美工修图强多了，还省了设计费。

当然，也有朋友问，那图片本身要不要加水印？我的建议是：重要的大图，前端加一层动态水印；上传到服务器的原图，最好也保留一份带硬水印的版本，作为底牌。这样就算有人破解了前端代码，也没法直接拿到干净的原图。

这里有个小坑要注意。水印的层级（z-index）一定要设得足够高，比如9999，确保它浮在所有内容之上。同时，字体颜色要选灰色或浅蓝色，别用纯黑，那样太刺眼，影响用户体验。老张之前试过用红色大字，结果客户投诉说看不清产品细节，最后改成了浅灰斜体，既美观又防盗。

另外，现在有些网站喜欢用SVG矢量水印，好处是放大不失真，而且代码更轻量。对于响应式网站，SVG能自适应不同屏幕尺寸，这点比PNG强。不过实现起来稍微复杂点，需要懂点SVG路径绘制。

总结一下，网站上面的水印怎么做的，没有标准答案，得看你的需求。如果是内部系统，CSS平铺最快；如果是对外展示，JS动态层更稳妥。别为了防盗而牺牲体验，水印应该是“润物细无声”的存在。老张回去后，花半天时间就搞定了，现在他的网站清爽又安全，再也没人敢随便盗图了。

最后提醒一句，别指望水印能100%防盗，它主要起威慑作用。真正的保护，还得靠版权登记和法律手段。但有了这层技术防护，至少能让那些伸手党知难而退，省得你天天盯着后台看谁偷了图。