0

我正在尝试使用 CSS 设置按钮样式。这是按钮的 HTML 代码：

<button class='custombtn' name="doLogin" type="submit" id="doLogin3" value="Login">Login</button>

这是CSS代码。

.custombtn {
    width:163px;
    height:43px;
    background-image:url('images/normal.png');
    background-color:#d3d3d3;
}
.custombtn:hover {
    background-image:url('images/hover.png');
}
.custombtn:active {
    background-image:url('images/click.png');
}

在我查看结果之前，我认为一切都很好。而不是像这样带有文字的东西：

在此处输入图像描述

它看起来像这样：

在此处输入图像描述

我已经在网上阅读了大约一个半小时的修复程序，但是没有一个起作用。我知道可以把它设计成这样，我只需要找到一种方法。

正常.png

在此处输入图像描述

悬停.png

在此处输入图像描述

点击.png

在此处输入图像描述

4

3 回答 3

1

您需要明确设置border:none; background-color:transparent;on .custombtn。

于 2012-10-06T21:57:14.867 回答
1

您需要将边框设置为无。那肯定可以解决问题并确保图像本身没有空白。

于 2012-10-06T22:04:33.327 回答
0

我认为按钮的背景和边框是你头痛的原因。

尝试这样的事情：

.custombtn {
    margin: 10px;
    width:163px;
    height:43px;
    background-image:url('images/normal.png');
    background-color: transparent;
    border: none;
}
.custombtn:hover {
    background-image:url('images/hover.png');
}
.custombtn:active {
    background-image:url('images/click.png');
}​
于 2012-10-06T22:08:42.117 回答