在網(wǎng)頁設(shè)計(jì)中，讓文字在圖片下面顯示是一個(gè)常見的需求，通過CSS（層疊樣式表），我們可以輕松地實(shí)現(xiàn)這一功能，下面是一些步驟和代碼示例，幫助你實(shí)現(xiàn)文字在圖片下面的效果。

步驟

1、HTML結(jié)構(gòu)：你需要有一個(gè)包含圖片和文字的HTML結(jié)構(gòu)，圖片可以是一個(gè)img標(biāo)簽，文字可以是div或p

2、CSS樣式：通過CSS設(shè)置圖片和文字的相對(duì)位置，圖片應(yīng)該設(shè)置為相對(duì)定位（position: relative），文字設(shè)置為***定位（position: absolute），并設(shè)置文字的bottom屬性為0，這樣文字就會(huì)顯示在圖片的下方。

3、調(diào)整位置：如果需要，可以通過調(diào)整left、right、top和bottom屬性來微調(diào)文字的位置。

代碼示例

下面是一個(gè)簡單的HTML和CSS示例，展示如何實(shí)現(xiàn)文字在圖片下面的效果：

HTML

<div class="image-container">
  <img src="image.jpg" alt="圖片" />
  <div class="text">文字</div>
</div>

CSS

.image-container {
  position: relative;
  width: 300px; /* 你可以根據(jù)需要設(shè)置圖片的寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置圖片的高度 */
}
img {
  width: 100%;
  height: 100%;
}
.text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px; /* 根據(jù)需要設(shè)置文字的內(nèi)邊距 */
  background-color: rgba(255, 255, 255, 0.7); /* 設(shè)置文字背景色 */
}

效果圖

![文字在圖片下方](效果圖.png)

其他提示

響應(yīng)式設(shè)計(jì)：確保你的設(shè)計(jì)是響應(yīng)式的，這樣文字在圖片下面的效果在不同設(shè)備上都能良好地顯示。

圖片大小：根據(jù)圖片的大小和內(nèi)容，可能需要調(diào)整CSS中的width和height屬性。

文字樣式：可以根據(jù)需要設(shè)置文字的樣式，如字體、顏色、大小等。