在網(wǎng)頁設(shè)計中，經(jīng)常需要在圖片上添加標(biāo)題，來讓用戶更好地理解圖片的含義，增強(qiáng)設(shè)計的美感和表現(xiàn)力。這時候，我們就需要運(yùn)用CSS來實現(xiàn)這個效果了。

/*圖片上帶標(biāo)題樣式*/
.img-title {
position: relative; /*設(shè)置position屬性為相對定位*/
display: inline-block; /*設(shè)置為行內(nèi)元素，可讓圖片和文字在同一行顯示*/
}
.img-title img {
vertical-align: middle; /*使圖片垂直居中對齊*/
}
.img-title p {
position: absolute; /*標(biāo)題采用絕對定位*/
left: 0; /*距離左側(cè)為0*/
bottom: 0; /*距離底部為0*/
width: 100%; /*寬度為100%*/
background-color: rgba(0, 0, 0, 0.5); /*設(shè)置半透明黑色背景*/
color: #fff; /*設(shè)置文字顏色為白色*/
font-size: 14px; /*設(shè)置文字大小*/
padding: 8px; /*內(nèi)邊距是8px*/
}

上述代碼中，我們給圖片所在的div設(shè)置了相對定位，這樣，在圖片上方添加一個絕對定位的p元素時，就是相對于這個div進(jìn)行定位。p元素中設(shè)置了背景色和文字樣式，使標(biāo)題更清晰易讀。

在HTML中，我們只需要在img元素和p元素外再套一層div，然后在div中加上img-title樣式即可。

<div class="img-title">
<img src="example.jpg" alt="示例圖片">
<p>這是示例圖片</p>
</div>

以上代碼會在示例圖片上方顯示一段黑色背景的文字“這是示例圖片”。