css定义文字在图片上

在网页设计中，有时需要在图片上添加文字，以达到更加生动的效果。在这种情况下，我们可以使用 CSS 来定义文字在图片上的位置。

/*定义图片文字的容器*/
.imageText {
  position: relative;
  display: inline-block;
}

/*定义文字的样式*/
.imageText p {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0,0.7);
  color: #fff;
  font-size: 16px;
  padding: 10px;
  margin: 0;
}

上述代码定义了一个名为 .imageText 的容器，其中使用了 position: relative 属性来让容器成为其内部元素的相对定位。接着，我们在容器内部定义了一个 p 标签，该标签的 position: absolute 属性用来将文字定位到容器的底部，width: 100% 属性则表示文字区域的宽度和容器一样宽，text-align: center 属性用来居中文字，background-color 用来设置文字区域的背景颜色，color 属性用来设置文字颜色，font-size 属性用来设置文字大小，padding 属性用来设置文字区域的内边距。

最后，我们在 HTML 代码中使用 .imageText 容器来包含图片和文字。如下所示：

<div class="imageText">
  <img src="example.jpg" alt="Example">
  <p>这是图片上的文字</p>
</div>

通过以上代码，我们就成功地将文字添加到了图片上。