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

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

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

只要我应用背景图像，按钮就会变得非常简单：

我使用Firebug检查了两个按钮的计算样式，除了我应用的样式和边框宽度的一些微小变化（从2.5px到1.66667px），它没有显示任何差异。我增加了

边框宽度：2.5px对样式没有帮助

我的图像有一个alpha通道，只有黑色的加号应该显示出来。我对CSS的理解是，原始按钮的样式仍然应该应用，而我的按钮只添加背景图像。我希望最后会有一个按钮，大致如下所示：

如何添加背景图像并保持奇特的按钮外观？
请尝试将按钮图片制作成圆形珠子。
如果您只想添加加号，请尝试以下操作：

Html:

我不确定我是否理解这个答案。似乎至少有两种方法可以让按钮看起来很好。一种是使用CSS样式来控制它。另一个是更改按钮的背景图像。所以我建议他用第二个。试图使背景图像更好。使用PS或Indesign…谢谢，但我不想用图像替换按钮。我想将图像合成到浏览器提供的按钮的背景中，并使按钮继续继承其默认样式。谢谢，但我已经尝试并拒绝了该解决方案，因为减号与加号切换不匹配。减号的栏不够宽，它在加号下面显示了几个像素。在任何情况下，您的答案都不能解决如何应用背景图像并使按钮继续继承默认样式的问题。我可能希望在将来对无法在字符集中表示的不同图像重用此解决方案。
#toggleButton {
    background-image: url("plus.png");
    background-repeat: no-repeat;
    background-position: center;
}

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

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