怎么用审查元素去水印

打开一个带水印的用审网页，右键点一下图片，查元选“检查”——水印很可能就藏在那行HTML代码里。素去水印我上个月帮朋友扒一张活动海报，用审网站把水印做成了一张半透明的查元PNG，直接叠在图片上面。素去水印审查元素里找到那个<img>标签，用审把它的查元src删掉，水印当场消失。素去水印这法子比截图裁剪快得多，用审也不损失画质。查元

先说说原理。素去水印浏览器加载页面时，用审会把所有元素按DOM树排好。查元水印通常有三种实现方式：一是素去水印独立图片元素，二是CSS背景图，三是伪元素（::before/::after）。前两种在审查元素面板里肉眼可见，第三种稍微隐蔽些，但也能在样式栏里揪出来。

拿Chrome举例。按F12或者右键选“检查”，Elements面板会高亮当前鼠标指向的节点。把鼠标移到水印上，如果它是个独立元素，代码行会闪烁。找到后直接按Delete键，或者右键选“Delete element”。水印没了，底下的原图还在。我试过某图库网站，水印是<div class="watermark">，删掉后图片完整露出，连刷新都不用——当然刷新后会恢复，所以得及时截图或另存。

CSS背景图的情况稍微绕一点。水印不在HTML结构里，而是写在某个容器的background-image属性中。比如.photo-box { background: url(watermark.png) center no-repeat; }。这时候在Elements面板选中那个容器，看右侧Styles栏，找到background那一行，把前面的勾去掉，或者直接改成background: none;。水印立刻消失。我遇到过一个博客，水印用background-size: cover铺满整个图片区域，去掉后原图干净得像没加过水印。

伪元素水印更阴险。它不在DOM里，但Styles面板会显示::after或::before规则。比如.image-wrapper::after { content: ""; background: url(watermark.svg); }。你需要在Styles栏里找到这个伪元素规则，取消勾选或者把content改成none。有一次我折腾了十分钟，最后发现水印是::before加了一层半透明文字，改掉content就解决了。

还有一种情况：水印是canvas绘制的。这种审查元素基本没辙，因为水印已经和图片像素混在一起。不过可以试试在Console里执行document.querySelector('canvas').toDataURL()，把canvas内容导出来，但水印依然在。所以遇到canvas水印，老实说，审查元素帮不上忙，得换思路。

实际操作用得最多的是删元素和改CSS。有个小技巧：如果水印元素有id或class，可以在Console里直接写document.querySelector('.watermark').remove()，回车就删。比在Elements面板里找快。但注意，有些网站用JavaScript动态生成水印，删掉后可能过几秒又冒出来。这时候可以试试setInterval(() => document.querySelector('.watermark')?.remove(), 100)，每100毫秒删一次，跟它耗。

最后提醒一句：审查元素改的是本地浏览器渲染结果，不是服务器上的文件。你看到的干净图片只存在自己电脑上，刷新或换设备就没了。想保存的话，右键“图片另存为”或者截图。另外，去掉水印自己看看没问题，拿去商用或者传播，版权风险自己掂量。我一般只用来临时看个清楚，不会存下来乱发。

很赞哦!（777）