带有 css 的 ImageButton 上的文本答案

【问题标题】：Text on an ImageButton with css带有 css 的 ImageButton 上的文本
【发布时间】：2013-05-07 09:32:55
【问题描述】：

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

目前我有以下内容：-

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

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

有可能吗？

【问题讨论】：

只需删除 ReportImageButtonText 类中的所有内容即可正常工作
@Johann 如果您喜欢 Thomas W 的回答，请接受它，以便我们都知道问题已得到解答并已完成。谢谢。

标签： asp.net html css imagebutton

【解决方案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>

【讨论】：

【解决方案2】：

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

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

JSFiddle

【讨论】：

谢谢 Olaf，不过我喜欢 Thomas 的回复 :)