如何在网页中添加水印效果

最新推荐文章于 2025-06-26 11:09:47 发布

转载最新推荐文章于 2025-06-26 11:09:47 发布 · 193 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mailserver/archive/2012/09/21/2696838.html

本文详细介绍了如何在网页上创建水印效果，包括设计水印图案、选择合适的位置以及实现跨浏览器兼容性。通过使用动态HTML和客户端脚本，文章指导读者如何在IE和Navigator浏览器上实现水印效果，同时提供了代码示例以供实践。

从传统意义上讲，水印是用来鉴别真假的，因为他们的存在并不影响印刷在该页上内容的清晰度。后来把水印的概念引入数字时代。在页面制作时利用这个技巧，在页面上就可以做出一个半透明的标志，它就像独立的悬浮在页面上一样。尽管这很麻烦，但能产生非常漂亮的效果。

这里有几种在主页上产生水印效果的方法。例如，如果访问者使用的是IE浏览器，只需用<BODY background=”graphic/g.gif” bgprgperties=fixed>就可产生水印效果。但这对Navigator不适用，它会自动地将图片平铺显示。为了兼顾不同的浏览器，必须使用动态HTML来实现这个功能。GeoCities采用服务器端来检测访问者使用的浏览器，并针对不同的浏览器（IE或Navigate）采用不同的实现方法。下面是一种单一的客户端脚本，它能在上述两种浏览器上工作，甚至还可以给用户更大的选择余地。

第一步，创建或设计水印图案。它可以是支持任何HTML语言的图像格式，尽管图像的尺寸是准确的，还必须将它的尺寸提供给脚本。同时还需花时间从页面的整体上来考虑水印的设计。水印是否设计为透明的？是否要和背景色协调？应该有多大？建议这一步一定要细心，以免遮蔽页面或扰乱访问者的注意力。

第二步，确定把水印放在不支持DHTML浏览器的何处（比如说底部）。然后在<DIV>标记中嵌入属性id=”watermark”,stytle=”position:absolute”。

第三步，在包含水印的<DIV>容器之后添加该脚本，这样就可以实现水印效果。较好的位置是放在结束的</BODY>标记前。

这样就可以在不同的浏览器的网页中添加水印效果了，注意其中对水印效果的宽度位置和像素等就需要设计者根据需要来进行设计。

转载于:https://www.cnblogs.com/mailserver/archive/2012/09/21/2696838.html