web网页中一张图片被文字上右下包围的代码

以下是一个示例代码，可以实现让一张图片被文字包围的效果：

<div style="width: 500px; height: 300px; position: relative;">
  <img src="your-image.jpg" style="position: absolute; top: 0; left: 0; z-index: 1;">
  <div style="position: absolute; top: 50px; left: 150px; z-index: 2;">
    <p>这里是要包围图片的文字内容。</p>
  </div>
</div>

在上述代码中，我们首先创建了一个容器 `<div>`，并设置了其宽度和高度。接着，我们在容器中插入了一张图片，并将其设置为绝对定位。图片的 `top` 和 `left` 属性可以根据需要进行调整，以便使其显示在容器中的合适位置。

下一步，我们创建了一个包围图片的文字块，并将其设置为绝对定位。通过调整文字块的 `top` 和 `left` 属性，我们可以将其放置在图片的上方、右方、下方或左方。在上述代码中，我们将文字块放置在图片的右侧和下方。

最后，我们可以在文字块中插入要展示的文本内容。为了让文字块显示在图片的上方，我们可以将文字块的 `z-index` 属性设置为比图片更高的值。