在網(wǎng)頁(yè)設(shè)計(jì)中，圖片上添加文字是一種常見(jiàn)需求，我們可以使用CSS樣式來(lái)實(shí)現(xiàn)這一功能，下面是一些基本步驟和示例代碼，幫助你了解如何在圖片上添加文字。

1、HTML結(jié)構(gòu)：我們需要在HTML中創(chuàng)建一個(gè)包含圖片和文字的容器。

<div class="image-container">
    <img src="path-to-your-image.jpg" alt="描述圖片">
    <div class="text">你的文字內(nèi)容</div>
</div>

2、CSS樣式：我們需要使用CSS來(lái)定位文字，并設(shè)置樣式。

.image-container {
    position: relative;
    width: 300px; /* 根據(jù)圖片大小調(diào)整 */
    height: 200px; /* 根據(jù)圖片大小調(diào)整 */
}
.image-container img {
    width: 100%;
    height: 100%;
}
.image-container .text {
    position: absolute;
    top: 50%; /* 調(diào)整文字垂直位置 */
    left: 50%; /* 調(diào)整文字水平位置 */
    transform: translate(-50%, -50%); /* 使文字居中 */
    color: #fff; /* 文字顏色 */
    font-size: 24px; /* 文字大小 */
    text-align: center; /* 文字對(duì)齊方式 */
}

3、JavaScript（可選）：如果你需要更多的交互功能，比如點(diǎn)擊文字后圖片放大，可以使用JavaScript來(lái)實(shí)現(xiàn)。