網站在展示圖片和內容時，常常需要加上水印來保護版權和防范惡意下載。加水印的方式有很多種，這里介紹一種使用CSS在頁面上加水印的方法。

首先，需要準備一張透明背景的水印圖片。可以使用Photoshop等軟件來制作一個大小適合的水印圖片。

.watermark {
background: url('watermark.png') center center no-repeat;
pointer-events: none; /* 防止水印影響鼠標事件 */
}

以上CSS代碼定義了名為.watermark的類，將水印圖片作為背景，居中顯示，并設置 pointer-events: none; 防止水印影響鼠標事件。

接下來，在需要加水印的元素上應用.watermark類即可：

<div class="content watermark">
<img src="example.jpg">
<p>這是一篇示例文章</p>
</div>

以上代碼定義了一個名為content的div元素，同時應用了.watermark類。該元素內包含一個圖片和一段文本內容。水印將被添加在div元素的背景上。

需要注意的是，此方法添加的水印是在客戶端渲染的，因此并不會真正保護圖片和內容。如果需要更嚴格的版權保護，應該在服務器端進行處理。