<div 加水印是網頁開發中常用的一種技術，它可以在網頁中添加一個透明的背景圖片或者文字，以達到保護版權或者美化頁面的效果。在本文中，我將介紹幾個使用 div 加水印的代碼案例，幫助讀者更好地理解和運用這一技術。
案例一：背景圖片水印
在網頁中使用背景圖片作為水印是一種常見的做法。下面是一個示例代碼：

<style>
.watermark {
width: 100%;
height: 100%;
background-image: url('watermark.png');
background-repeat: repeat;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
</style>
<br>
<div class="watermark"></div>
<!-- 網頁內容 -->

上述示例代碼中，通過添加一個類名為 "watermark" 的 div 元素，并設置其樣式，實現了一個透明的水印效果。該 div 的寬度和高度都設置為 100%，即占滿整個網頁的空間。背景圖片使用 background-image 屬性指定，通過設置 background-repeat 屬性為 repeat，使背景圖片平鋪整個頁面。通過設置 opacity 屬性為 0.8，可以控制水印的透明度。最后，通過設置該 div 的 position 為 absolute，top 和 left 為 0，使其固定在網頁的左上角。z-index 屬性為 -1 則將水印置于所有內容之后。
案例二：文字水印
除了背景圖片，我們還可以使用文字作為水印。下面是一個示例代碼：

<style>
.watermark {
width: 100%;
height: 100%;
position: relative;
}
.watermark::before {
content: "版權所有，禁止轉載";
color: #ccc;
font-size: 20px;
opacity: 0.5;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<br>
<div class="watermark"></div>
<!-- 網頁內容 -->

上述示例代碼中，通過添加一個類名為 "watermark" 的 div 元素，并設置其樣式，繪制了一個文字水印效果。通過設置 .watermark::before 選擇器，我們可以在該 div 元素的前面添加一個偽元素，并設置其樣式。通過 content 屬性設置偽元素的內容為 "版權所有，禁止轉載"，color 屬性設置文字顏色為灰色，font-size 屬性設置文字大小為 20px。opacity 屬性設置文字的透明度為 0.5。通過設置 position 為 absolute，將文字置于該 div 元素內部的居中位置，使用 transform: translate(-50%,-50%); 屬性實現垂直和水平居中的效果。
這兩個案例展示了使用 div 加水印的兩種常見方式，可以根據實際需求進行調整。通過使用這些技術，我們可以在網頁中添加漂亮的水印效果，保護自己的版權，或者為頁面增添美感。希望本文對讀者在開發過程中應用 div 加水印技術提供了幫助！