css 合同列印print 水印

最近做合同模板，發現原本的新增水印的方式出現了新bug。或者說原有的那種方式，忽略了一種特殊的情況：樣式強加的列印頁（page-break-after: always;）。

原因分析：先附上原本的那種js動態新增水印的方式（通過js給網頁加上水印背景），能解決大部分場景的需求。但是，它卻沒法計算到強加列印頁的那部分高度，導致水印加不上。舉個例子：合同模板一般後面都會需要新增一些附加內容，原因分析：

附件二租賃房屋平面圖

附件四實際居住人資訊表

js動態載入新增的方式，會去獲取合同網頁的高度。這部分，它只能獲取到5行文字的高度，但是，實際上列印時，附件二租賃房屋平面圖和附件三房屋**證明檔案影印件都是單獨的占用了乙個列印頁的，這就導致多出來的那部分一大片空白沒有水印。

解決思路：改用樣式背景來解決。用position:fixed;加重複背景圖的方式，**如下：

/*水印*/

.watermark

這種方式就能覆蓋到每個列印頁，不管是內容自動撐開的還是樣式強加列印頁的那種都可以。缺點：你需要更換，比如需要3種水印：合同草稿，已備案，已簽約。那麼就需要3個，每次改動需要修改。