在CSS中，我們可以使用類（class）來在圖片上加字，下面是一些步驟和示例代碼，幫助你實現(xiàn)這一功能：

1、創(chuàng)建HTML結(jié)構(gòu)：我們需要創(chuàng)建一個HTML元素來承載圖片和文本，可以使用div元素來包裹圖片和文本。

<div class="image-with-text">
  <img src="your-image-url" alt="描述圖片的文字">
  <p>這是加在圖片上的文字</p>
</div>

2、應(yīng)用CSS類：我們可以應(yīng)用CSS類來樣式化這個元素，可以使用***定位（absolute positioning）來將文本放置在圖片上。

.image-with-text {
  position: relative;
  width: 300px; /* 你可以根據(jù)需要設(shè)置寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置高度 */
}
.image-with-text img {
  width: 100%;
  height: 100%;
}
.image-with-text p {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5); /* 可選，設(shè)置文本背景透明度 */
}

3、結(jié)果：你應(yīng)該能夠在圖片上看到加上的文字了，文本將覆蓋在圖片上，你可以根據(jù)需要調(diào)整文本的位置和樣式。

示例代碼：

HTML：

<div class="image-with-text">
  <img src="your-image-url" alt="描述圖片的文字">
  <p>這是加在圖片上的文字</p>
</div>

CSS：

.image-with-text {
  position: relative;
  width: 300px; /* 你可以根據(jù)需要設(shè)置寬度 */
  height: 200px; /* 你可以根據(jù)需要設(shè)置高度 */
}
.image-with-text img {
  width: 100%;
  height: 100%;
}
.image-with-text p {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.5); /* 可選，設(shè)置文本背景透明度 */
}