190

だから、私はを使用して画像で入力ボタンを作成することができます

<INPUT type="image" src="/images/Btn.PNG" value="">

しかし、CSSを使用して同じ動作を取得することはできません。たとえば、私は試しました

<INPUT type="image" class="myButton" value="">

ここで、「myButton」はCSSファイルで次のように定義されています。

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

それが私がやりたかったのであれば、元のスタイルを使用することもできますが、ホバー時のボタンの外観を変更したいと思います（myButton:hoverクラスを使用）。ページの他の部分の背景画像としてリンクを読み込むことができたので、リンクが適切であることはわかっています（チェックとして）。JavaScriptを使用してそれを行う方法の例をWebで見つけましたが、CSSソリューションを探しています。

違いがあれば、Firefox3.0.3を使用しています。

4

12 に答える 12

121

CSS を使用してボタンのスタイルを設定する場合は、type="image" ではなく type="submit" ボタンにします。type="image" は、CSS で設定できない SRC を想定しています。

Safari では、探している方法でボタンのスタイルを設定できないことに注意してください。Safari のサポートが必要な場合は、画像を配置し、フォームを送信する onclick 関数を用意する必要があります。

于 2008-10-12T16:10:18.913 に答える
115

タグを使用できます<button>。送信するには、単に追加しtype="submit"ます。次に、ボタンをグラフィックとして表示する場合は、背景イメージを使用します。

そのようです：

<button type="submit" style="border: 0; background: transparent">
 <img src="https://i.imgur.com/tXLqhgC.png" width="90" height="90" alt="submit" />
</button>

より詳しい情報

于 2008-10-12T16:14:13.603 に答える
76 

div.myButton input {
  background: url(https://i.imgur.com/tXLqhgC.png) no-repeat;
  background-size: 90px;
  width: 90px;
  height: 90px;
  cursor: pointer;
  border: none;
}
<div class="myButton">
  <INPUT type="submit" name="" value="">
</div>

これは、Safariでもどこでも機能します。

于 2009-07-28T10:54:51.123 に答える
25

送信ボタンの CSS 画像置換に関するこの記事が役立ちます。

「このメソッドを使用すると、スタイル シートがアクティブなときにクリック可能な画像が表示され、スタイル シートがオフのときに標準のボタンが表示されます。トリックは、画像置換メソッドをボタン タグに適用し、それを送信ボタンとして使用することです。入力を使用します。

また、ボタンの境界線が消去されるため、ボタン カーソルをリンクに使用する手の形に変更することもお勧めします。これにより、ユーザーに視覚的なヒントが提供されます。"

CSS コード:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}
于 2008-10-12T16:12:31.217 に答える
13

これはより簡単な解決策ですが、余分な周囲の div はありません:

<input type="submit" value="Submit">

CSS は、基本的な画像置換技術を使用します。ボーナス ポイントとして、イメージ スプライトを使用して示します。

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

ソース: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

于 2011-02-03T02:38:40.767 に答える
3

これは、Philoye によるソリューションをわずかに変更した Internet Explorer で私にとってうまくいったものです。

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}
于 2011-02-11T16:09:11.607 に答える
2

以下が最善の解決策だと思います。

CSS：

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 24px;
    height: 24px;
}

HTML：

<input class="edit-button" type="image" src="transparent.png" />
于 2012-04-23T19:14:00.547 に答える
2

以前の回答のバリエーション:

不透明度を設定する必要があることがわかりました。もちろん、これは Internet Explorer 6 以降で機能します。ボタンが応答しない Internet Explorer 8 の行の高さのソリューションに問題がありました。そしてこれでハンドカーソルもゲット！

<div id="myButton">
    <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
    background: url("form_send_button.gif") no-repeat;
    width: 62px;
    height: 24px;
}

#myInputButton {
    background: url("form_send_button.gif") no-repeat;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    width: 67px;
    height: 26px;
    cursor: pointer;
    cursor: hand;
}
于 2011-04-15T20:59:41.317 に答える
2

タグのターゲットとしてblank.gif (1 ピクセルの透明な画像) を使用できます。

<input type="image" src="img/blank.gif" class="button">

次に、CSS で背景のスタイルを設定します。

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}
于 2011-04-01T17:56:43.463 に答える
1

JavaScript を使用せず、画像を使用しない私のソリューションは次のとおりです。

HTML:

<input type=Submit class=continue_shopping_2
       name=Register title="Confirm Your Data!"
       value="confirm your data">

CSS:

.continue_shopping_2: hover {
    background-color: #FF9933;
    text-decoration: none;
    color: #FFFFFF;
}


.continue_shopping_2 {
    padding: 0 0 3px 0;
    cursor: pointer;
    background-color: #EC5500;
    display: block;
    text-align: center;
    margin-top: 8px;
    width: 174px;
    height: 21px;
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #919191;
    font-family: Verdana;
    font-size: 13px;
    font-style: normal;
    line-height: normal;
    font-weight: bold;
    color: #FFFFFF;
}
于 2012-11-20T20:10:37.850 に答える
0

おそらく、.js ファイルもインポートして、JavaScript で画像を置き換えることができます。

于 2008-10-25T19:40:52.283 に答える