应用背景图像时如何保持现有的按钮样式？

Question

我是CSS的新手，我正在尝试为按钮添加背景图像。我有一个简单的输入按钮，我用它作为显示div的切换。我想在按钮中放一个图像。我正在使用以下HTML。

<input type='button' id='toggleButton'>

当我在Firefox 9.0.1的网页中查看时，它看起来很棒：

我将以下样式应用于它以添加我的图像：

#toggleButton {
    background-image: url("plus.png");
    background-repeat: no-repeat;
    background-position: center;
}

当我应用背景图像时，按钮变得非常简单：

我使用Firebug来检查两个按钮的计算样式，除了我应用的样式和边框宽度的一些微小变化（从2.5px到1.66667px）之外，它没有显示任何差异。我在样式中添加了border-width: 2.5px;，但没有帮助。

我的图片有alpha通道，只显示加号的黑色。我对CSS的理解是仍然应用原始按钮的样式，而我的按钮只添加背景图像。我希望最终得到一个看起来像这样的按钮：

如何添加背景图像并保持花哨的按钮外观？

Answer 1

如果您只想添加一个加号，请尝试这样的事情：

HTML：

<input type='button' id='toggleButton' value="+" />

CSS：

#toggleButton {
  font-family: Helvetica, Arial;
  font-weight: bold;
  font-size: 14px;
  vertical-align: middle;
  text-align: center;
  padding: 3px;
  color: #444444;
}

Answer 2

请尝试将按钮图片设为圆形珠。