利用DIV层实现图片水印效果

http://blog.csdn.net/ojekleen/article/details/2739236

很多情况下图片在WEB显示的时候要加水印,利用gui+网络上也有很多类似的代码,

但是在页面不同并要求加的水印图片不同的情况下,利用gui实现就只有把各种情况下加上的水印图片都准备好,再分别调用不同的图片路径,这样就未免会耗费资源,为了更好实现可能出现多个水印状况的图片,好的方式就是利用DIV层来实现图片的水印.

整段代码竟用JS实现,水印位置为右下角,水印图片为.png格式.

 

[HTML]  view plain copy print ?

1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
2.   
3.   
4.   
5.   
6.       
7.    <script type="text/javascript">  
8. function fixpng()  
9. {  
10.   var arVersion = navigator.appVersion.split("MSIE")  
11.   var version = parseFloat(arVersion[1])  
12.   if ((version >= 5.5) && (document.body.filters))  
13.   {  
14.      for(var i=0; i<document.images.length; i++)  
15.      {  
16.         var img = document.images[i]  
17.         var imgName = img.src.toUpperCase()  
18.         if (imgName.substring(imgName.length-3, imgName.length) == "PNG")  
19.         {  
20.            var imgID = (img.id) ? "id='" + img.id + "' " : ""  
21.            var imgClass = (img.className) ? "class='" + img.className + "' " : ""  
22.            var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "  
23.            var imgStyle = "display:inline-block;" + img.style.cssText  
24.            if (img.align == "left") imgStyle = "float:left;" + imgStyle  
25.            if (img.align == "right") imgStyle = "float:right;" + imgStyle  
26.            if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle  
27.            var strNewHTML = "<span " + imgID + imgClass + imgTitle  
28.            + " style=/"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"  
29.            + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"  
30.            + "(src=/'" + img.src + "/', sizingMethod='scale');/"></span>"  
31.            img.outerHTML = strNewHTML  
32.            i = i-1  
33.         }  
34.      }  
35.   }  
36. }  
37. </script>  
38.   
39.   
40.     <form id="form1" runat="server">  
41.         <div>  
42.             <table style="BACKGROUND: #fff" width="100%" border="0"><tbody><tr><td valign="top" align="right"><div style="FLOAT: left; MARGIN-LEFT: 0px; POSITION: relative"><a><img height="30" alt="四季天体星相仪" hspace="0" src="https://p-blog.csdn.net/images/p_blog_csdn_net/ojekleen/EntryImages/20080730/Q11115.jpg" width="116" border="0"></a> <div style="RIGHT: 0px; BOTTOM: 1px; POSITION: absolute"><span class="waterMark"><img height="30" alt="" hspace="0" src="https://p-blog.csdn.net/images/p_blog_csdn_net/ojekleen/EntryImages/20080730/watermark_best.png" width="28"> </span></div></div></td></tr></tbody></table>  
43.         </div>  
44.     </form>  
45.   
46.   
47. <pre></pre>