html - 使文本位于图像之上的最简单和最可靠的方法是什么(GWT，CSS)？

Question

好的，我有一个消息系统的邮件图标。每当有新的来信时，系统将计算消息的数量并将该数字显示在邮件图标的顶部。

他在xml文件中

<g:FlowPanel addStyleNames="{res.css.flowInline}">                                  
    <g:Image ui:field="privateMessageImage" addStyleNames="{res.css.mailIcon}"
 url="/images/icon/mail.png" title="Private Message" />
    <g:Label text="6" addStyleNames="{style.privateMessageNumber}" />    
</g:FlowPanel>

结果是这样的:

________|__\/__|6   

That is not what i want cos the number 6 is right at the end of the mail icon.

So I want it look like this

________|6_\/__|   

Here is css

.privateMessageNumber{
    font-weight:bold;
    color:red;  
    font-size: large;   
}
.mailIcon{
    width:37px;
    height:25px;
    cursor: pointer;
    cursor: hand;
}

那么如何修复才能达到想要的效果呢。

注意:我只想要一个可以在所有浏览器中工作的非常可靠的 css，我不需要五颜六色的复杂 css。

Answer 1

不要使用图像。将图像设置为标签的背景。

background-image:url('/images/icon/mail.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

将标签的宽度设置为与您使用的图标的宽度相同。使用 text-align 属性将数字定位在您想要的位置。