在網(wǎng)頁設(shè)計中，往往會用到一些圖片文字的效果，比如讓文字出現(xiàn)在圖片上方或下方。那么該怎么實現(xiàn)呢？這就需要使用CSS來完成。

首先，我們需要在HTML中放置要顯示的圖片和文字：

<div class="container">
<img src="image.jpg">
<p>這是一段文字。</p>
</div>

然后，在CSS中設(shè)置容器的樣式：

.container {
position: relative;
}

接下來，我們?yōu)槲淖衷O(shè)置樣式：

.container p {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
text-align: center;
}

代碼的解釋如下：

• 通過設(shè)置position屬性為absolute，我們可以讓文字相對于容器進(jìn)行定位。
• bottom屬性為0，表示文字在容器底部。
• left和right屬性為0，表示文字的寬度與容器一致。
• 通過設(shè)置background-color屬性為rgba(0, 0, 0, 0.5)，我們?yōu)槲淖痔砑恿艘粋€半透明的背景色。
• color屬性為#fff，表示文字顏色為白色。
• padding屬性為10px，表示文字與背景色的距離。
• text-align屬性為center，表示文字水平居中。

最后，我們還需要為圖片設(shè)置寬度和高度，以確保容器的大小與圖片一致：

.container img {
width: 100%;
height: auto;
}

這樣，我們就完成了圖片文字的效果。如果想讓文字出現(xiàn)在圖片上方，只需要將bottom改為top即可。