前言：

最近在做項目，PD提需求讓做一個頁面水印，百度到的答案好像大部分都是圖片的，要麼七七八八的，百度了好久，現在總結出來了這個精簡中的精簡版的教程，與大家分享。（源碼下載鏈接在文章末尾，如果不想看可以直接至翻到末尾。）

分析需求：

PD需要的是整個頁面佈滿水印，那麼可以確定三件事情：

1. 我們加載頁面後就要把這個水印填在頁面上
2. 需要根據頁面大小，動態跳轉頁面上水印數量，防止某些人縮小刷新，放大截圖。

那麼我們就可以得到下面的基本結構。

下面我們就可以開始添加水印了

添加水印：

水印我們可以JS生成一個DIV，設置絕對定位來做（在其他網站上，好像水印都是斜着的，所以順便給他旋轉一下），同時需要取消這個div的點擊事件，否則會影響頁面交互。

首先做這個向頁面添加一個DIV，來看看效果，然後再說其他的，效果如圖：

可以看到，這時，我們的第一個水印已經產生了，並且，我們這個水印不影響下面文章的複製（我已經測試過，輸入框，按鈕等任何東西，都不會影響，相當於這個水印是隻能看到，不能對他進行其他操作）。

批量添加水印：

具體思路是，計算頁面寬高，根據單個水印的寬高來計算橫向的水印數量，豎向的水印數量，使用循環，添加無數水印的div。效果和代碼如下：

細心的小夥伴可能會發現這段代碼有問題：縮放網頁時，會出現顯示的問題，因爲他會在同一個地方一直畫水印，造成雖然透明度很低，但是仍然很明顯。

解決上訴小bug：

在添加水印之初，我們獲取到指定類名的元素，全部刪除，之後再添加新的就解決了上述問題（但是偶爾會有幾個刪不掉，造成偶爾會有幾個較亮），雖然還有小問題，但是無所謂了，下面看我們的最終效果。

最終效果：

在這裏，我去掉了多餘的邊框等東西，並且把文字顏色調整成了常見的灰色，把配置等抽象出來，加入了一個時間日期的獲得器，總之，看一下吧：

源碼鏈接：

末尾彩蛋：

如果我們把水印的透明度調到0.1以下，比如，0.05，我們肉眼時看不見這個水印的，但是，他和周圍會有一丟丟的色差，如果放在PS中做一些處理，就可以很好的看到這個水印。