1

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

目前我有以下内容： -

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

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

可能吗？

4

2 回答 2

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>
于 2013-05-07T09:36:46.060 回答
0

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

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

JSFiddle

于 2013-05-07T09:41:17.933 回答