Question

所以我在工具栏上有两个图像作为按钮。由于某些我不知道的原因，只有一小部分图像保持可见。如果我在这里错了，请纠正我，但我使用了一个按钮并将背景图像设置为我想要的图片。这是我的代码。任何帮助表示赞赏！

CSS：

button.openTS {
  float: right;
  background: url("/images/tslogo.png") no-repeat;
  cursor: pointer;
  border-width: 0px;
  margin-right: 20px;
  margin-left: 5px;
  width: 23px
}

  button.openIRC {
  float: right;
  background: url("/images/irclogo.png") no-repeat;
  cursor: pointer;
  border-width: 0px;
  margin-left: 20px;
  margin-right: 5px;
  width: 23px
}

div.toolbar {
  background-color: #D6D6D6;
  border-bottom-style: solid;
  border-bottom-width: 10px;
  border-bottom-color: #000000;
  border-left-style: solid;
  border-left-width: 10px;
  border-left-color: #000000;
  border-right-style: solid;
  border-right-width: 10px;
  border-right-color: #000000;
  border-radius: 15px;
  position: absolute;
  top: 0px;
  right: 0px
}

HTML：

<div class="toolbar">
    <h4 class="toolbar">Toolbar:</h4>
    <button onClick="TSappear(); IRCdisappear()" class="openTS"></button>
    <button onClick="IRCappear(); TSdisappear()" class="openIRC"></button>
</div> <!--This ends the Toolbar Div-->

以下是正在发生的事情的图片：

如果我添加高度，则会发生这种情况：http://i.imgur.com/qNB9xAH.png

这是正常情况：http://i.imgur.com/whOACaH.png

Answer 1

看起来你需要给你的.openIRC课程一个高度。具有背景图像的元素不会像<img>元素那样自行调整大小。因此，您的.openIRC项目只会向其显示最高子元素（可能是文本）的背景图像。

Demo Fiddle: 以我所谈论的为例。

只显示图像的一小部分

1 个答案: