html頁面添加水印

如何在html或者jsp頁面添加水印而不影響頁面的基本架構，今天我給出如下例子，敬請指錯

<style type="text/css" media="screen">
    .cover {
        position:absolute;
        left:0;
        top:0;
        z-index:999999999999999;
        margin-right:0px;
        margin-left:0px;
        margin-top:5px;
        margin-bottom:140px;
        color:#fff;
        color:#ccc\0;
        display:block;
        padding:2px 1px;
        font-family:'宋體';
        font-size:16px;
        font-weight:bold;
        white-space:nowrap;
        text-shadow: 1px 0 0 #eee;
        transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);
        -moz-opacity:0.3; opacity:0.3;
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
    }
    .cover-Blink-area{ position:absolute;text-align: center;left:0;top:0;width:100%;height:100%;display:block;z-index:999999999999999; pointer-events: none;overflow: hidden;}
    .cover-Blink{
        display:inline-block;
        margin-right:50px;
        margin-left:50px;
        margin-top:140px;
        margin-bottom:140px;
        color:red;
        padding:2px 1px;
        font-family:'宋體';
        font-size:16px;
        font-weight:bold;
        color: pink;
        white-space:nowrap;
        text-shadow: 1px 0 0 rgba(0,0,0,.2);
        transform:rotate(45deg);
        -ms-transform:rotate(45deg);
        -moz-transform:rotate(45deg);
        -webkit-transform:rotate(45deg);
        -o-transform:rotate(45deg);

    }
</style>

<script type="text/javascript">
    $(function(){
        waterMark$();
    });
    function waterMark$(){
        if(navigator.appName == "Microsoft Internet Explorer"&& navigator.appVersion.match(/11./i)!="11."){
            $("p[name='p1$']").remove();
            var winwidth$ = document.body.scrollWidth-17;
            var winheight$ = document.body.scrollHeight;
            $("body").append("<p id='waterSum_11' name='p1$' class='cover_through cover js-click-to-alert'>測試張璐</p>");
            var fleft = Number($('#waterSum_11').css("margin-left").substring(0,$('#waterSum_11').css("margin-left").indexOf('p')));
            var ftop = Number($('#waterSum_11').css("margin-top").substring(0,$('#waterSum_11').css("margin-top").indexOf('p')));
            var perWidth = $("#waterSum_11").width();
            var perHeight = Number('140px'.substring(0,'140px'.indexOf('p')))+100;
            var lines = parseInt(winwidth$/(perWidth+fleft));
            var rows = Math.round(winheight$/(perHeight+ftop));
            var totalPWidth = perWidth*lines;
            var totalSpace = winwidth$-totalPWidth;
            var perSpace = parseInt(totalSpace/(lines+1));
            $('#waterSum_11').css("margin-left",perSpace);
            for(var i=1;i<=rows;i++) {
                for(var j=1;j<=lines;j++){
                    if(i==1){
                        if(j<=lines-1){
                            var p = "<p id='waterSum_"+i+""+(j+1)+"' name='p1$' class='cover_through cover js-click-to-alert'>SK測試</p>";
                            var ileft = $('#waterSum_'+i+''+j).css("margin-left").substring(0,$('#waterSum_'+i+''+j).css("margin-left").indexOf('p'));
                            var itop = $('#waterSum_11').css("margin-top").substring(0,$('#waterSum_11').css("margin-top").indexOf('p'));
                            $("body").append(p);
                            $('#waterSum_'+i+''+(j+1)).css("margin-left",Number(ileft)+Number(perWidth)+perSpace);
                            $('#waterSum_'+i+''+(j+1)).css('margin-top',itop);
                        }
                    }else{
                        var p = "<p id='waterSum_"+i+""+j+"' name='p1$' class='cover_through cover js-click-to-alert'>${TmpContent}</p>";
                        var ileft = $('#waterSum_'+(i-1)+''+j).css("margin-left").substring(0,$('#waterSum_'+(i-1)+''+j).css("margin-left").indexOf('p'));
                        var itop =  $('#waterSum_'+(i-1)+''+j).css("margin-top").substring(0,$('#waterSum_'+(i-1)+''+j).css("margin-top").indexOf('p'));
                        $("body").append(p);
                        $('#waterSum_'+i+''+j).css("margin-left",Number(ileft));
                        $('#waterSum_'+i+''+j).css('margin-top',Number(itop)+Number(perHeight));
                    }
                }
            }
            passThrough();
        }else{
            waterMarkNotIe$();
        }
    }
    function waterMarkNotIe$(){
        var winwidth$ = document.body.clientWidth;
        var winheight$ = document.body.scrollHeight;
        var waterSum$ = 100;
        var oldleft$=0;
        var maxI$=0;
        var k$=0;
        $("body").append("<div class='cover-Blink-area'> </div>");
        $('.cover-Blink-area').css('height','500px');
        for( var i=1;i<=waterSum$;i++) {
            $(".cover-Blink-area").append("<p id='waterSum_" +i+"' class='cover_through cover-Blink js-click-to-alert'>SK測試</p>");
            var left = Number(document.getElementById("waterSum_" +i).offsetLeft);
            if(left>oldleft$) {
                oldleft$ = left;
                maxI$ = i;
            }
            if (left<oldleft$&&k$==0){
                var top = $("#waterSum_1").css("margin-top").substring(0,$("#waterSum_1").css("margin-top").indexOf('p'));
                var bottom = $("#waterSum_1").css("margin-bottom").substring(0,$("#waterSum_1").css("margin-bottom").indexOf('p'));
                var pHeight = $("#waterSum_1").height();
                var totalHeight = Number(top)+Number(pHeight)+Number(bottom);
                var Hnum = Math.round(500/(totalHeight/1.3));
                waterSum$ = Hnum*maxI$;
                k$++;
            }
        }
    }
    window.onresize = function(){
        waterMark$();
    }
    function passThrough() {
        $(".cover").mouseenter(function(){
            $(this).stop(true).fadeOut().delay(1500).fadeIn(50);
        });
    }
</script>
           

效果如下：