CSS在圖片加文字可以實現各種效果，比如文字浮現在圖片上方、在圖片下方顯示文字等等。以下是一些實現方法，可以根據實際需要靈活運用。

首先，我們需要在HTML中給圖片加上一個類名，比如這里的“my-img”：

<img src="my-img.jpg" class="my-img">

接下來，在CSS中為這個類名增加樣式：

.my-img {
position: relative;
display: inline-block;
}
.my-img::after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 30%;
background: linear-gradient(to bottom, transparent, black);
}
.my-img-text {
position: absolute;
bottom: 0;
width: 100%;
color: white;
font-size: 1.5em;
font-weight: bold;
}

上面的代碼實現的效果是，圖片下方會有一個黑色半透明的遮罩，并且在遮罩上方可以添加文字。在HTML中添加文字，可以像這樣：

<img src="my-img.jpg" class="my-img">
<p class="my-img-text">這是圖片下方的文字</p>

如果要讓文字浮現在圖片上方，可以將文字的位置改為“top”：

.my-img-text {
position: absolute;
top: 0;
width: 100%;
color: white;
font-size: 1.5em;
font-weight: bold;
}

上面的代碼實現的效果是，文字會在圖片上方顯示。

還有一種比較流行的效果是在圖片上方顯示一個半透明的背景，并在背景中央顯示文字。這種效果可以通過以下代碼實現：

.my-img {
position: relative;
}
.my-img::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.3s ease;
}
.my-img:hover::before {
opacity: 1;
}
.my-img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1.5em;
font-weight: bold;
}

上面的代碼實現的效果是，在鼠標懸停在圖片上方時，顯示一個半透明的黑色背景，中央顯示文字。

總之，通過一些簡單的CSS樣式，我們可以實現豐富多樣的圖片加文字效果，這對于網頁設計來說是非常有用的。希望本文對您有所幫助。