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

使用CSS for ReportButton不能这样做吗？

.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>

Answer 2

您可以在不移动position: relative的情况下添加.ReportButton，并相应地调整文本的位置。这会将.ReportImageButtonText正确地放置在包装器div的边界内

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

JSFiddle

带有CSS的ImageButton上的文本

2 个答案: