在設計網頁時，常常需要在圖片上添加水印來標識與保護版權，這時候就需要使用到水印CSS技術。

.watermark {
position: relative; /*相對定位*/
font-size: 24px; /*字體大小*/
opacity: 0.5;  /*透明度*/
margin-bottom: 20px; /*下邊距*/
}
.watermark::before {
content: "? YOUR COPYRIGHT"; /*水印文字*/
position: absolute;
top: 50%; /*上邊距*/
left: 50%; /*左邊距*/
transform: translate(-50%, -50%) rotate(-30deg); /*旋轉*/
color: #fff; /*字體顏色*/
text-shadow: 1px 1px 2px #000; /*文字陰影*/
}

上述代碼中，我們首先使用了相對定位將水印放置在圖片上。然后設置了字體大小、透明度和下邊距。我們還使用了偽元素::before來創建水印文字，其中包含了水印文字的內容、絕對定位、旋轉、字體顏色和文字陰影等樣式。

接著，我們就可以在HTML中給目標圖片添加CSS類.watermark，以實現圖片水印的效果。

<img src="example.jpg" class="watermark" />

當然，水印CSS并不僅限于文字的形式。我們還可以通過設置背景圖片來制作樣式獨特的圖片水印，或通過使用CSS濾鏡來調整水印透明度或模糊度等效果。

總之，水印CSS技術是網頁設計中不可或缺的一環，它不僅可以有效地保護版權，還可以為網頁添加一份獨特的風格。大家可以在實際應用中不斷探索創新，創造出更加優秀的作品。