这几天有网友问到背景图片的问题，他要的是一张图片永远固定在某一区块，就算卷轴拖拉也一样在那边，酱的功能用CSS就能做出来了，但是却让我想到另一个idea。有些网站会在自己的图片或是照片上加上图片版权为XXX所有的字样，有点像是新台币纸钞上面的浮水印一样，酱一来可以防止人偷图(抓了图还要修字...)，二来就算被盗连了，至少上面有说是盗自那边的网站。不过若是要一张一张的加浮水印的话，又有点浪漫时间的感觉，所以我就想到一种伪浮水印的方法。
什么是伪浮水印？顾名思义就是假的浮水印啦~让人以为是真的有浮水印，但其实那只是个幌子。假设有一张照片要来伪装，我们要先准备一张版权字样的透明图及一张大小1x1的透明图，接着就是把这三张图合成一张。各位听到这边各位应该都还是不了解我在说什么吧！直接看下面的图解好了。
经过伪装后
先把版权宣告字样的透明图移到照片的右下角，再来就是把1x1的透明图放大跟要被伪装的照片一样大小后，把透明图叠在照片上面，因为是透明图的关系，所以我们还是可以看到照片跟版权宣告的字样，且透明图是在最上层，若有人要复制照片的话，只会复制到透明图，无法点选到真正的照片，酱就能达到伪装的功能了。不过若是看原始码的话~就会破功了，这只能用来骗骗不懂的人！
了解完原理后就开始来动手做做看，先看Body部份：
这边我放了六张Xuite的logo图，且在某三张图的Img中加入了一个属性-ispic，这是要用来区分那些图是要加浮水印用的，若为true时就是表示要加浮水印；若为false或是没有此属性则表示不用加。其中的border="1"是为了方便看出图的范围用的，实际情况下可以拿掉。
再来换看JavaScript的部份：
在网页载入完后会执行init()函式来做伪装的工作。一开始我宣告了两个Image物件出来，一个用来存放版权字样图片用，另一个用来存放1x1透明图用。接着就是先找出网页中图片的数量，再用回圈一一来判断该图片是否要伪装，若为true的话，就开始取得该图片的offsetTop、offsetLeft、width及height并算出myLogo的top及left值跟myBack的top、left、width及height值。
若不懂这些值是怎样来的可以先看下图的说明：
正常情况之下可以利用DOM物件来取得物件style属性中所设定的top及left的值,以达到取得物件座标之目的,若是未设定style属性中的top及left值的物件的话,此时就需要利用offsetTop及offsetLeft来取得对应的座标值。
所以版权字样图片的top值就是要伪装照片的offsetTop+(要伪装照片的height-版权字样的height，left 值就是要伪装照片的offsetLeft+(要伪装照片的width-版权字样的width)；那1x1的透明图的宽高就是要伪装照片的宽高，top和left就是要伪装照片的offsetTop跟offsetLeft。
接着就是产生一个Img物件并加到网页中。1x1透明图中的border=2是为了方便看出它是透明图用的，实际情况下一样可以拿掉。
这样效果的语法并不难，只是座标关系要对就好，至于实不实用就看各位啰。
范例浏览：
http://abgne.myweb.hinet...0010.html以上内容于2005/10/03发表在小弟的Blog里
http://blog.xuite.net/abgne/diary1/4084719
