用CSS为网页加上水印(add water mark to your page via CSS)

有些时候我们需要提示客户“DO NOT COPY”, 就像在MS Word中所做的那样，昨天遇到这样的case，就尝试用CSS+DIV解决：

 

 页面代码如下，还有一些地方需要改进，比如调整水印的大小以覆盖全部页面等：

 

 

< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
     < title > Untitled Page </ title >
     < style  type ="text/css" >
        .bg
         {
            width :  200% ;
            height :  200% ;
            margin :  0px ;
            position :  absolute ;
            z-index :  100 ;
            top :  0px ;
            left :  0px ;
            background-color :  #000 ;
            filter :  alpha(opacity=5) ;
            -moz-opacity :  0.05 ;
            opacity :  0.05 ;
            font-size :  159px ;
            color :  White ;
         }
     </ style >
</ head >
< body >
     < div  class ="bg" >
         < br >
         < br >
        DO NOT COPY!! </ div >
     < div  style ="color: Black" >
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
        Write your contents here < br  />
     </ div >
</ body >
</ html >