帶有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上的文字

回答

相關問題