用CSS为网页加上水印(add water mark to your page via CSS)
有些时候我们需要提示客户“DO NOT COPY”, 就像在MS Word中所做的那样,昨天遇到这样的case,就尝试用CSS+DIV解决:
页面代码如下,还有一些地方需要改进,比如调整水印的大小以覆盖全部页面等:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
.bg
{
width: 200%;
height: 200%;
margin: 0px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=5);
-moz-opacity: 0.05;
opacity: 0.05;
font-size: 159px;
color: White;
}
</style>
</head>
<body>
<div class="bg">
<br>
<br>
DO NOT COPY!!</div>
<div style="color: Black">
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
Write your contents here
<br />
</div>
</body>
</html>
<head>
<title>Untitled Page</title>
<style type="text/css">
.bg
{
width: 200%;
height: 200%;
margin: 0px;
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
background-color: #000;
filter: alpha(opacity=5);
-moz-opacity: 0.05;
opacity: 0.05;
font-size: 159px;
color: White;
}
</style>
</head>
<body>
<div class="bg">
<br>
<br>
DO NOT COPY!!</div>
<div style="color: Black">
Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

Write your contents here

</div>
</body>
</html>
标签:
Web UI
, JavaScript/AJAX
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?