CSS 是一種用于網頁樣式設計的語言，它可以為網頁中的元素添加各種樣式效果。在網頁設計中，我們常常會遇到需要將一個 div 元素放置在一個圖片上的情況。這樣的布局可以用來創建各種有趣而獨特的效果，比如圖片上的文字，或者通過交互效果改變圖片的外觀等。本文將通過幾個代碼案例來詳細解釋如何使用 CSS 實現在圖片上放置 div 元素。
第一個案例是將一個固定大小的 div 元素放置在圖片的右上角。我們可以通過設置 div 元素的定位屬性為絕對定位，并給定 top 和 right 屬性來實現。同時，為了保證 div 元素在圖片上方，我們需要設置 div 元素的 z-index 屬性為一個比圖片元素更高的數值。下面是示例代碼：

<p>HTML 代碼:</p>
<pre>
<div class="container">
<img src="image.jpg" alt="圖片">
<div class="overlay">
<p>這里是一些內容</p>
</div>
</div>

CSS 代碼:

.container {
position: relative;
display: inline-block;
}
<br>
.overlay {
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
color: white;
z-index: 2;
}

上述代碼中，我們創建了一個外部容器 div，并在其中放置了一張圖片和一個帶有內容的 overlay div。通過為容器 div 設置相對定位，我們可以讓 overlay div 相對于圖片進行定位。設置 overlay div 的 top 和 right 屬性為 10px，使其位于圖片的右上角。同時設置了一些樣式效果，如背景色、內邊距和字體顏色。
第二個案例是將一個 div 元素放置在圖片的中心。為了實現這個效果，我們可以使用 flexbox 來進行布局。我們將圖片和 div 元素都放置在一個外部容器 div 中，并將其設置為 flex 容器。通過在容器中設置 align-items 和 justify-content 屬性為 center，我們可以使圖片和 div 元素都在容器中水平和垂直居中。下面是示例代碼：

<p>HTML 代碼:</p>
<pre>
<div class="container">
<img src="image.jpg" alt="圖片">
<div class="overlay">
<p>這里是一些內容</p>
</div>
</div>

CSS 代碼:

.container {
display: flex;
align-items: center;
justify-content: center;
}
<br>
.overlay {
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
color: white;
}

上述代碼中，我們將容器 div 設置為 flex 容器，并設置 align-items 和 justify-content 屬性為 center。這樣就使得圖片和 overlay div 都在容器中水平和垂直居中。然后，我們可以對 overlay div 設置一些樣式效果，如背景色、內邊距和字體顏色。
通過以上兩個案例，我們可以看到如何使用 CSS 將 div 元素放置在圖片上。無論是固定在某個位置，還是居中對齊，都可以根據實際需求進行調整。通過 CSS 的強大功能，我們可以輕松創建出各種引人注目的圖片效果，使網頁設計更具有吸引力。希望本文的示例代碼和解釋能夠幫助大家更好地理解如何實現這些效果。