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

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.5 像素到 1.66667 像素)之外，它没有显示任何差异。我在样式中添加了 border-width: 2.5px; 但没有帮助。

我的图像有一个 alpha channel ，应该只显示加号的黑色。我对 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;
}