CSS 首字下沉图像，文本在空白部分对齐-PHP中文网问答

我认为这不是日常的 dropcap 情况。

我的大写字母“S”是这样的图像：

请注意，实际图像一直延伸到上栏。顶栏是同一图像的一部分，其中包含大 S 和 S 左侧的图画。我将背景着色为蓝色，以便在这里可以轻松看到它，但自然色是白色。 （但是请忽略最顶部的额外灰色区域，这是进行屏幕捕获时的笨拙。） 我不想破坏顶栏和图像。提供给我的图像如图所示 - 一个矩形区域，右上角绘制了一个顶栏，顶栏下方有空白。

我希望文本看起来像这样（使用paint.net创建）：

请注意，第一行文本与首字大写“S”的底部对齐；前三行位于图像中白色区域的顶部，第四到第六行与页边距左对齐。

另请注意，文本必须覆盖图像的白色部分。

另请注意，我无法保证总文本宽度；这将是一个 EPUB，可以在多个设备上查看。因此绝对应该避免 position:absolute。

这是我迄今为止尝试过的 HTML，几乎完全删除了相关 CSS：

<p class="dropcap-para">
<img width=135 height=108 style="float:left" src="image002.jpg" alt="dropcap S"></img>
<span class="funky-text">HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

谢谢。