在HTML & CSS中，图片嵌入文字方法

在网页制作中，"图片嵌入文字中"通常可以理解为让图片与文字融合，产生图文混排的效果。根据具体需求，有以下几种常见的实现方式，你可以根据实际场景选择最合适的方法。

1. 图片作为行内元素（简单嵌入）

将 <img> 标签直接放在文字段落中，图片会像一个大号字符一样显示在文本行内。这是最基础的嵌入方式。

html 复制代码

<p>
  这是一段文字，中间嵌入了一张图片
  <img src="example.jpg" alt="示例图片" style="width: 30px; height: auto; vertical-align: middle;">
  图片就像文字的一部分，可以通过 `vertical-align` 调整对齐方式。
</p>

2. 文字环绕图片（标准图文混排）

使用 float 属性让图片浮动在左侧或右侧，文字会自动环绕在图片周围。这是最常用的"嵌入"效果。

html 复制代码

<div class="wrap">
  <img src="example.jpg" alt="图片" class="float-left" style="width: 200px; margin-right: 15px; margin-bottom: 10px;">
  <p>
    这里是一大段文字，这里是一大段文字，这里是一大段文字，这里是一大段文字，这里是一大段文字，这里是一大段文字......
    图片使用 float: left 后，文字会环绕在图片的右侧和下方。可以设置 margin 调整间距，让排版更美观。
  </p>
</div>

css 复制代码

.float-left {
  float: left;
}
/* 如需图片在右侧，使用 float: right; 并调整左边距 */

3. 不规则形状的文字环绕（CSS Shapes）

如果希望文字围绕图片的轮廓（例如圆形、多边形）排列，可以使用 shape-outside 属性配合浮动。

html 复制代码

<div class="shape-wrap">
  <img src="example.jpg" alt="圆形图片" class="circle-image" style="width: 200px; border-radius: 50%; shape-outside: circle(50%); float: left; margin-right: 20px;">
  <p>
    这段文字会沿着圆形图片的边缘环绕，效果更自然。`shape-outside` 可以定义多种形状（circle、polygon 等），让文字贴合图片的非矩形轮廓。
  </p>
</div>

4. 图片作为文字背景

将图片设为文字所在容器的背景，文字浮在图片上方。这属于"文字在图片上"，而不是"图片在文字中"，但有时也表达类似需求。

html 复制代码

<div class="background-text" style="background-image: url('example.jpg'); background-size: cover; padding: 20px; color: white;">
  <p>这段文字的背景是一张图片，可以通过调整文字颜色、背景遮罩等提高可读性。</p>
</div>

5. 图片填充文字形状（高级效果）

利用 -webkit-background-clip: text 可以将图片裁剪到文字笔画内部，形成文字显示图片的效果。注意兼容性（主要支持 WebKit 内核浏览器）。

html 复制代码

<h1 class="image-text">DESIGN</h1>

css 复制代码

.image-text {
  background-image: url('example.jpg');
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 80px;
  font-weight: bold;
}

这种方法让图片"嵌入"到文字笔画中，视觉冲击力强。

总结

简单嵌入 ：直接放 <img> 标签，适合小图标。
文字环绕 ：使用 float，适合普通图文混排。
形状环绕 ：使用 shape-outside，适合设计感强的页面。
背景嵌入 ：用 background-image，适合文字在上图片在下。
图片填充文字 ：用 background-clip: text，适合标题艺术效果。

根据你的具体设计需求，选择一种或多种方法组合使用即可。