前端怎么在照片下加文字

要在照片下方添加文字，可以使用HTML和CSS来实现。一种常用的方法是使用一个包含照片和文字的容器元素，并将容器元素设置为相对定位(position: relative)，然后再在容器元素内添加一个文字元素，并将其设置为绝对定位(position: absolute)，并通过top和left属性来控制文字的位置。

具体操作步骤如下：

1. HTML代码中添加一个容器元素和图片元素，例如：

<div class="image-container">
  <img src="your-image.jpg" alt="your image">
  <div class="image-text">Your text here</div>
</div>

2. 在CSS中设置容器元素的样式，包括宽度、高度和相对定位等属性，例如：

.image-container {
  position: relative;
  width: 300px;
  height: 200px;
}

3. 设置图片元素的样式，包括宽度和高度等属性，例如：

.image-container img {
  width: 100%;
  height: 100%;
}

4. 在容器元素内添加一个文字元素，并设置其样式，包括绝对定位、top和left等属性，例如：

.image-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-align: center;
  padding: 10px;
}

其中，bottom和left属性可以控制文字的位置，width属性可以使文字元素与容器元素等宽，background-color属性可以设置文字背景颜色，color属性可以设置文字颜色，text-align属性可以控制文字水平居中对齐，padding属性可以控制文字和边框的间距。

通过以上步骤，就可以在照片下方添加文字了。需要注意的是，文字的样式可以根据需要进行调整，以达到最终期望的效果。