Web 頁面如何新增水印？

1、 程式碼開發版實現方法

常規程式碼實現思路是：

1）web 頁面載入後，透過 javascript 建立頁面元素 div，並在 div 元素中建立文字節點，展示水印內容

2）設定 div 元素樣式，將其 zIndex 設定一個較高的值，並設定透明度，實現浮在頁面的水印效果

程式碼開發時需要考慮頁面自適應時寬高改變的情況，同時還需要保證不能影響頁面的原有事件功能，需要綜合考慮的細節比較多。

2、 懶人版實現方法

使用內建水印功能的報表工具，透過簡單屬性配置完成水印效果。

1）文字水印實現可以透過配置水印屬性：

文字要動態變化的話，只需要改為配置表示式就可以啦：

具體操作可以參考

實現效果如下圖所示：

2）logo 水印在報表工具中的實現也很簡單，配置下圖片屬性就可以了：

具體操作可以參考

實現效果如下圖所示：

使用報表工具不僅可以快速便捷的實現水印功能，還能給前端工程師帶來很多方便之處，例如一些前端效果（資料隔行異色顯示、點選表頭排序等）可以直接使用工具實現，不用再寫前端程式碼，減少了自己的程式碼工作量；另外同時也避免了因為需求變更導致的程式碼重新調整。