在網站開發中，經常需要在圖片上添加水印，來保護圖片資源不被盜用。使用CSS可以很方便地為圖片添加水印，下面我們就來看看如何實現吧。

.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: url("watermark.png");
opacity: 0.5;
}

首先我們為圖片設置一個position屬性值為relative的父級元素，以便于后續操作。接下來使用CSS的偽元素::after來為父級元素添加水印。使用content屬性來插入空內容來創建偽元素。使用position: absolute設置水印的絕對定位，top和left屬性值為50%，讓水印居中顯示。使用transform屬性調整水印的位置，translate的-50%讓水印水平和垂直居中。background屬性設置水印圖片的地址，使用opacity屬性設置水印透明度，使其不會影響原圖顯示效果。最后將上述樣式應用到父級元素。這樣我們就完成了使用CSS為圖片添加水印的操作，是不是很簡單？