我是 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 的理解是应该仍然应用原始按钮的样式,而我的按钮只添加了背景图像。我希望最终得到一个大致如下所示的按钮:
如何添加背景图片并保持精美的按钮外观?
最佳答案
如果你只想添加一个加号,试试这样的方法怎么样:
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;
}
关于css - 如何在应用背景图像时保持现有按钮样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9091118/