就如你现在看到的页面,布满了恶臭的水印代码;

可以实现用户在前端拍照 / 截图的时候,起到了水印保护的作用;

任何网站均可使用;

禁止商用/违法行为

实例代码

隐藏内容

<div style="position: fixed;left: 40px;top: 40px;right: 0;bottom: 0;z-index: 8500;pointer-events: none;background-image: url(&quot;data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='200' width='200'><text text-anchor='middle' transform='rotate(-20)' font-weight='bold' fill='rgba(221, 221, 221, .7)' font-size='14' ><tspan x='50' y='50'>IT自学网·人才汇聚 </tspan><tspan x='50' y='65'>提供免费编程资料 </tspan><tspan x='50' y='80'>学无止境,加油 </tspan><tspan x='50' y='95'> M.WPON.CN</tspan></text></svg>&quot;);">
</div>

格式化版

隐藏内容

<div style="position: fixed;

left: 40px;

top: 40px;

right: 0;

bottom: 0;

z-index: 8500;

pointer-events: none;

background-image: url(&quot;

data: image/svg+xml;

utf8,<svg xmlns='http: //www.w3.org/2000/svg' version='1.1' height='200' width='200'><text text-anchor='middle' transform='rotate(-20)' font-weight='bold' fill='rgba(221, 221, 221, .7)' font-size='14' ><tspan x='50' y='50'>IT自学网·人才汇聚 </tspan><tspan x='50' y='65'>提供免费编程资料 </tspan><tspan x='50' y='80'>学无止境,加油 </tspan><tspan x='50' y='95'> M.WPON.CN</tspan></text></svg>&quot;

);

"> </div>

讲解:

隐藏内容

fill='rgba(221, 221, 221, .7)' 更换字体颜色
其他都是css基础,不用讲了

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

评论(1)