Question

我有一个包含文字的按钮和一个说明点击事件的图片。我知道在按钮上显示图像作为背景是可行的。

CSS：

    .upperLeftButton {
        display: inline-block;
        background-image:url(Images/checkmark.png);
        height:50px;
        width:200px;
    }

HTML：

<asp:Button ID="checkInButton" runat="server" Text="Check In"  OnClick="checkInButton_Click"/>

有没有办法在按钮内并排显示图像和文字？

Answer 1

在`img`

中添加button标记

由于the button element can contain inner HTML content，您可以使用img标记替代在CSS中设置background-image。

img {
  margin-right: 5px;
  vertical-align: middle;
}
button {
  padding: 5px;
}

<button type="button">
  <img src="http://placehold.it/30" alt="Place Holder" />
  My cool button
</button>

Answer 2

是的...使用background-position，但这取决于您的目标......如果没有实际图像，我们无法分辨。

快速演示......

  .upperLeftButton {
    display: inline-block;
    background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
    background-repeat: no-repeat;
    background-position: center left 25px;
    height: 50px;
    width: 200px;
  }

<button class="upperLeftButton">Check</button>

Answer 3

将padding-left: 30px（或任何宽度的checkmark.png）和background: url(images/checkmark.png) top left no-repeat添加到按钮CSS，这样它会偏移文本，但在左下角留下图标。

编辑：另外，你也应该添加padding-top：10px（左右），所以文本也在中间垂直居中到图标。

Answer 4

另一个想法是重新设计（即使是简单的油漆）背景，并添加“空白”＃39;文本的空间，并用css放在那里。

.button{
background-image: url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size: cover;
width: 200px;
height: 50px;
text-align: left;
padding-left: 32px;}

喜欢这里的小提琴：

https://jsfiddle.net/pp719t5n/

黑色空间是您的文字的图像和空白背景。

按钮图像内联文本

4 个答案:

在`img`

按钮图像内联文本

4 个答案:

在img

在`img`