html与css中如何在图片上加入文字

在HTML和CSS中，在图片上添加文字通常使用`<img>`标签配合`<span>`、`<div>`或者其他容器元素以及内联样式或者外部CSS。下面是一个基本的步骤：

1. 使用`<img>`标签加载图片，例如：

   <img src="your-image.jpg" alt="图片描述">

2. 创建一个包裹元素，比如`<span>`或`<div>`，将图片包裹起来，并设置绝对定位（position: absolute;），使其不会影响到图片的原始位置：

   <span class="caption"> <!-- 或者 div -->
     <img src="your-image.jpg" alt="图片描述">
   </span>

3. 使用CSS设置这个元素及其内容的样式，包括字体大小、颜色、位置等，例如：

   .caption {
     position: relative;
     display: inline-block; /* 或其他适合的方式 */
     background-color: rgba(0, 0, 0, 0.5); /* 遮罩层背景色 */
     color: white;
     padding: 5px; /* 文字间隔 */
     font-size: 14px; /* 字体大小 */
     z-index: 2; /* 确保文字在图片之上 */
   }

   .caption span {
     position: absolute; /* 图片上的文字定位 */
     top: 50%; /* 根据图片高度调整 */
     left: 50%;
     transform: translate(-50%, -50%); /* 中心对齐文字 */
   }

通过这种方法，你可以在图片上创建出带文字的效果。