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');
}

結果を見るまでは、すべてうまくいっていると思っていました。このようなテキストの代わりに:

ここに画像の説明を入力

次のようになります。

ここに画像の説明を入力

これらの修正プログラムをオンラインで約 1 時間半読んでいますが、どれも機能していません。このようにスタイルを設定できることはわかっていますが、方法を見つける必要があります。

normal.png

ここに画像の説明を入力

hover.png

ここに画像の説明を入力

click.png

ここに画像の説明を入力

4

3 に答える 3

1

border:none; background-color:transparent;を明示的に設定する必要があります.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 に答える