带有css的ImageButton上的文字

我希望在具有背景的按钮上显示一些文字。然而，这不能与绝对位置绑定，因为我要在屏幕的多个部分重复使用此按钮，只更改我正在显示的文本。带有css的ImageButton上的文字

此刻，我有以下几点： -

<div class="ReportButton"> 
    <div class="ReportImageButton"> 
     <asp:Image runat="server" ImageUrl="Images/button_arrow.png" ID="ImgReportButton" ImageAlign="AbsMiddle" Height="40px" /> 
    </div> 
    <div class="ReportImageButtonText">Text Goes Here</div> 
</div>

和CSS：

.ReportButton { 
    width: 100px; 
    height: 40px; 
} 

.ReportImageButton { 
    height: 40px; 
    position: absolute; 
} 

.ReportImageButtonText { 
    height: 40px; 
    z-index: 100; 
    position: absolute; 
    color: white; 
    font-size: 12px; 
    font-weight: bold; 
    left: 330px; 
    top: 330px; 
}

这工作得很好，但是我希望避免使用，如果可能的绝对位置，为我所陈述的理由之前。

可能吗？

来源

2013-05-07 Johann

删除你在'ReportImageButtonText'类拥有的一切，它会正常工作 – enb081 2013-05-07 09:36:45

@Johann如果您喜欢的托马斯·W上的答案，请接受它，以便我们都知道这个问题是回答和完成的。谢谢。 – 2013-05-07 10:23:08

你不能用ReportButton的CSS来做到这一点吗？

.ReportButton { 
    width: 100px; 
    height: 40px; 
    background: url("/images/button-bg.png") no-repeat top left; 
    cursor: pointer; 
}

然后，只需：

<div class="ReportButton" onclick="doSomething();" > 
    Text Goes Here 
</div>

来源

2013-05-07 09:36:46

很酷的作品！非常感谢Thomas – Johann 2013-05-07 09:44:21

不客气。 – 2013-05-07 09:50:20

您可以添加position: relative不动.ReportButton，并相应地调整文字的位置。这将妥善包装div的边界内定位.ReportImageButtonText

.ReportButton { 
    position: relative; 
    width: 100px; 
    height: 40px; 
}

JSFiddle

来源

2013-05-07 09:41:17

谢谢奥拉夫，我很喜欢托马斯的回复:) – Johann 2013-05-07 10:28:05

带有css的ImageButton上的文字

回答

相关问题