在網頁開發中，有時候需要增加水印圖片來保護原始圖片的版權或者增加頁面的美觀性，這時候CSS增加水印圖片就成了一種常見的方法。

.watermark{
position: relative;
display: block;
}
.watermark:before{
content: "";
pointer-events: none;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
background: url('watermark.png') center center repeat;
opacity: .2;
z-index: -1;
}

以上是一個CSS增加水印圖片的樣例代碼，接下來我們對代碼中的一些關鍵詞進行解釋：

1、position: relative;指定水印圖片相對于父元素的絕對位置，如果沒有指定父元素，則相對于整個頁面。

2、display: block;設置水印圖片為塊級元素，方便進行定位等操作。

3、content: "";偽元素的內容，必須指定為空。

4、pointer-events: none;指定光標事件不影響懸停在水印上的元素，防止水印影響頁面其他元素的交互。

5、top、bottom、left、right、position、z-index：指定水印圖片的位置和相關屬性，需要根據實際情況進行調整，以達到理想的效果。

6、background: url('watermark.png') center center repeat;指定水印圖片的背景圖片，可以根據需求進行更換。

7、opacity: .2;設置水印圖片的透明度，可以根據需求進行調整。

8、z-index: -1;指定水印圖片的z軸層級，使其位于其他元素之后。

通過以上的CSS代碼，我們便可以實現水印圖片的增加，讓頁面更加美觀和有趣。