Javascript 使div与背景图像在段落中的跨度成一行

我目前正在尝试在我的应用程序中实现一个调试控制台。为此，我有一个带有以下CSS的主div：

#~main_div~ {
    display: none; /* gets set to display: block when the users wants the console */
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 25%;
    max-height: 350px;
    background-color: rgba(153, 153, 153, 0.8);
    text-align: left;
    overflow-y: auto;
} 

id~main_div~被一个元素替换，该元素实际上为一个加载的帧保存调试控制台，所有这些都正确地显示出来

然后，我向该div添加消息，这些消息通常采用以下格式：

<p>
    <span class="title_notice">[timestamp] Title: </span>
    <span class="message_notice">The message</span>
</p>

然而，有时我想显示文本中内联的图像，就像[图像]消息一样。我已通过以下方法完成此操作示例：

<p>
     <span class="title_notice">[timestamp] Title: </span>
     <span class="message_notice">The 
         <div style="display: inline-block; width: 25px; height: 25px; background-image:url(...);"></div>
         message
     </span>
</p>

如果你想知道为什么我使用div而不是img：它可以在图像内部给出一个偏移量和一个大小，这样它就只能显示图像的一部分，而afaik你不能用img这样做

可悲的是，结果如下： 抱歉，我无法附加图像，因为

问题1：div在一条新的生产线上 问题2：跨距上的格式（实际上由~main\u div~p字体系列、字体大小和字体重量以及.message\u通知颜色设置）丢失

有没有一种方法可以“内联”文本中的图像，使其位于同一行且格式不会中断，并且我只能选择图像的一部分？哦，而且这个解决方案只适用于webkit，不需要可移植性

预祝您节日快乐，万事如意

---

Cromon

你试过添加display:inline块吗？你在一个inline元素中添加了一个block元素div，span=not good。哦，我忘了添加一个小细节：如果我将display:inline添加到段落中，并在每个段落的末尾添加一个空的，它会起作用。问题2仍然存在，跨度的其余部分没有跨度起点的格式，请参见：像这样？img标签是否可以只显示图像的一部分？比如从10/10到50/50？就像我对背景位置所做的一样。