网页图片水印效果
从传统意义上讲，水印是用来鉴别真假，因为他们的存在并不影响印刷在该页上内容的清晰度。 后来GeoCities 把水印的概念引入数字时代。在页面制作时利用这个技巧，在页面上就可以作出一个半透明的标志，它就像独立的悬浮在页面上一样。尽管这很麻烦，但能产生非常漂亮的效果 。
这里有几种在主页上产生水印效果的方法。例如，如果访问者使用的是IE浏览器，只需用<BODY background="http://www.luuijie123.blog.163.com/g.gif" bgproperties=fixed>就可产生水印效果。但这对Navigator不适用，它会自动的将图片平铺显示。
为了兼顾不同的浏览器，必须使用动态HTML(DHTML)来实现这个功能。GeoCities采用服务器端来检测访问者使用的浏览器，并针对不同的浏览器（IE或Navigate）采用不同的实现方法。我们编写了一种单一的客户端脚本，它能在上述两种浏览器上工作，甚至还可以给您更大的选择余地。
第一步
创建或设计水印图案。它可以是支持任何HTML语言的图像格式，尽管图像的的尺寸是准确的，您还必须将它的尺寸提供给脚本。同时您还需花时间从页面的整体上来考虑水印的设计。水印是否设计为透明的？是否要和背景色协调？应该有多大？我们建议这一步一定要细心，以免遮蔽页面或扰乱访问者的注意力。
第二步
确定把水印放在不支持DHTML浏览器的何处（比如说底部）。然后在<DIV>标记中嵌入属性 id="waterMark",stytle="position:absolute"。
<DIV id="waterMark" style="position:absolute">
<A href="/index.html"><IMG src="/Images/watermark.gif" width=90 height=90 border=0></A>
</DIV>
第三步
在包含水印的<DIV>容器之后添加该脚本，这样就可以实现水印效果。较好的位置是放在结束的</BODY>标记前。
<script language="javascript1.2"><!--
// Watermark script by Paul Anderson, CNET Builder.com. All rights reserved.
markW = 64; // pixels wide
markH = 64; // pixels high
markX = 100; // percent right
markY = 100; // percent down
markRefresh = 20; // milliseconds
// set common object reference
if (!document.all) document.all = document;
if (!document.all.waterMark.style) document.all.waterMark.style = document.all.waterMark;
wMark = document.all.waterMark.style;
wMark.width = markW;
wMark.height = markH;
navDOM = window.innerHeight; // Nav DOM flag
function setVals() {
barW = 0; // scrollbar compensation for PC Nav
barH = 0; if (navDOM) {
if (document.height > innerHeight) barW = 20;
if (document.width > innerWidth) barH = 20;
} else {
innerWidth = document.body.clientWidth;
innerHeight = document.body.clientHeight; }
posX = ((innerWidth - markW)-barW) (markX/100);
posY = ((innerHeight - markH)-barH) (markY/100);
}
function wRefresh() {
wMark.left = posX + (navDOM?pageXOffset:document.body.scrollLeft);
wMark.top = posY + (navDOM?pageYOffset:document.body.scrollTop);
}
function markMe() {
setVals(); window.onresize=setVals;
markID = setInterval ("wRefresh()",markRefresh);
}
window.onload=markMe; // safety for Mac IE4.5
//-->
</script>
你可以根据自己的水印来调整这个脚本前面的五个设置变量。
markW = 64; // pixels wide
markH = 64; // pixels high
markX = 100; // percent right
markY = 100; // percent down
markRefresh = 20; // milliseconds
markW和markH变量分别和水印宽度和高度（用象素数表示）相等。如果水印中包含HTML文本，那么文本的宽度大约和该像素宽度相等。markX和markY用于确定水印在页面中的位置，它们是用所在位置与离开屏幕右上角尺寸的百分比来表示的。例如，如果它们均为50则表示位于屏幕的中央，如果分别为100和0时，表示位于屏幕的右上角。最后，调整markRefresh确定浏览器更新水印位置的频度，单位是毫秒。当这个值较低时，在滚动页面和水印本身更新的延迟时间较短，但这会向浏览器提出更多的更新请求。
样式可以用到<table...>标签和<td...>标签
.xuxian { border-top-width: 1px; //顶边边框宽度
border-right-width: 1px; //右边边框宽度
border-bottom-width: 1px;//底部边框宽度
border-left-width: 1px;//左边边框宽度
border-top-style: dotted;//顶边样式为虚线
border-right-style: dotted;//右边样式为虚线
border-bottom-style: dotted;//底边样式为虚线
border-left-style: dotted;// 左边样式为虚线
border-top-color: #000000;//顶边边框的颜色
border-right-color: #000000;//右边边框的颜色
border-bottom-color: #000000;//底边边框的颜色
border-left-color: #000000;//左边边框的颜色
}
除了定义为虚线你还可以把中间那一组样式定义为如下样式，举例：
border-top-style: dashed;//点划线
border-top-style: double;//双线
border-top-style: groove;//槽状
border-top-style: ridge;//脊状
border-top-style: inset;//凹陷
border-top-style: outset;//凸出