asp.net - 带有 CSS 的 ImageButton 上的文本

Question

我希望在具有背景的按钮上显示一些文本。然而，这不能与绝对位置相关联，因为我将在屏幕的多个部分重复使用此按钮，仅更改我正在显示的文本。

目前我有以下内容:-

<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;
}

这很好用，但是我希望尽可能避免使用绝对位置，原因我之前已经说过。

这可能吗？

Answer 1

您不能使用 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>