html文字放在图片上代码

在网页设计中，将文字放在图片上是一个常见的美化技巧。通过 HTML 代码，我们可以很容易地实现这个效果。下面是一个简单的代码示例：

<div class="wrapper">
  <img src="example.jpg" alt="例子">
  <h1>这是一段文字</h1>
</div>

在这个示例中，我们使用了一个 div 元素来包裹图片和文字。这样可以方便地进行样式设置。我们在这个 div 元素中先放置了一张图片，然后在图片上通过 h1 元素放置了一段文字。

当然，这种方法并不是唯一的。还可以使用 CSS 来实现这一效果。下面是一个基于 CSS 的代码示例：

<div class="wrapper">
  <div class="image-container">
    <img src="example.jpg" alt="例子">
    <h1>这是一段文字</h1>
  </div>
</div>

<style>
.wrapper {
  position: relative;
  /* 其他样式设置 */
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式设置 */
}
</style>

在这个示例中，我们使用了 position 属性来实现重叠效果。将图片和文字都放在一个新的 div 元素中，我们可以进行更细致的样式设置。.image-container 元素设置了绝对定位，使其覆盖在图片之上。而 h1 元素继续使用了绝对定位，并通过 transform 属性来居中显示文字。

总之，无论是使用 HTML 还是 CSS，文字放在图片上都是一个功能强大的美化技巧。只需要一些简单的代码和一些调整，就可以轻松地实现这一效果。