[分享]css中如何把文字的放到图片中

在网页设计中，我们经常会遇到需要将文字放到图片中的需求。这时候，CSS就派上用场了。下面就来详细介绍如何实现这个效果。首先，我们需要准备一张图片和一段文字。为了操作方便，我们将图片和文字都放到一个di...

在网页设计中，我们经常会遇到需要将文字放到图片中的需求。这时候，CSS就派上用场了。下面就来详细介绍如何实现这个效果。
首先，我们需要准备一张图片和一段文字。为了操作方便，我们将图片和文字都放到一个div中。
html代码如下：

<div class="container">
  <img src="example.jpg">
  <p>这是一段文字。</p>
</div> 

接下来，我们需要使用CSS来使文字和图片重合。首先，我们设置.container为相对定位。

.container {
  position: relative;
} 

接着，我们使用绝对定位来使文字和图片重合。我们可以给p标签设置绝对定位并设置top和left属性，使其居中显示在图片上。同时，我们还需要设置p标签的宽度，以便使文字能够正确显示在图片中。

.container {
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
} 

现在，我们已经成功地将文字放到了图片中。使用CSS的定位属性，使得p标签上的文字可以随意移动，并且适配图片的大小，为网站的美化起到了很大的作用。
完整的代码如下：

<div class="container">
  <img src="example.jpg">
  <p>这是一段文字。</p>
</div>

.container {
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}