3

背景画像を持つカスタムHTMLボタンを作成し、その画像の上にカスタムテキストを表示する方法を知りたいです。

たとえば、送信ボタンの背景画像があり、その画像の上に「送信」というテキストが表示されている送信ボタンを表示したいとします。

私はこれを試しました-

<input type="button" value="Submit" style="background-image: url(pages/images/ButtonBackground.png);">

ただし、正しく動作しません。テストの送信とボタンが表示されますが、画像が表示されません。

誰かがこれを手伝ってくれるといいですね。

4

4 に答える 4

7

または<button>の代わりに使用することをお勧めします。その理由は、HTML要素（ネスト要素）を要素に埋め込むことができるためです。このようにして、さらに柔軟なボタンを作成でき、さらにカスタマイズすることができます。<input type='submit' /><input type='button' /><button>

<button>
    <span class='image'></span>
    <span class='text'>Click Me!</span>
</button>
于 2011-12-09T17:33:18.177 に答える
4 
<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;">

ボタンを覆うように画像の幅と高さを指定する必要があります。はい、画像のパスを確認してください。

これはまさに私がCSSの1つに持っているものであり、通常はこの状況で私が行うことです。

html

<input type="submit" value="" name="commit" id="message_submit" class="registerbtn"/>

css

.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;}
于 2011-12-09T17:34:49.643 に答える
1

最も簡単な方法は、おそらく背景のあるボタン要素を使用することです。たとえば、パディングプロパティを使用して、ボタンを適切に大きくします。ボタンの背景色を設定すると、テキストと十分なコントラストのある色を使用して、何らかの理由で背景画像が表示されない場合に使用できます（したがって、色の使用法は背景画像と同じである必要があります）。 ）。例：

<button type=submit style="background: #ccc url(test.jpg); padding: 0.5em 1em">Go!</button>

警告：古いバージョンのIEでは、ボタン要素の実装にいくつかのバグがあります。フォームに複数の送信ボタンがある場合、バグは最も深刻になります。

input type = submit要素を使用するときに失敗する理由は、CSSの影響を受けない組み込みルーチンを使用して、ブラウザーによって一般的に実装されるためです。

于 2011-12-09T19:12:28.057 に答える
0

これが、実際の写真とテキストを含むボタンを作成した方法です。CSSで私は置きました：

button {
    display: inline-block;
    height: 200px;
    padding: 2px;
    margin: 2px;
    vertical-align: top;
    width: 400px;
 }

#alldogs-close-CSS {
     background-image: url( All_dogs.jpg );
     /*background-size: 100px 130px;*/
     height: 150px;
     width: 300px;
}

ボタンは私の高さと幅を制御#alldogs-close-CSSし、ボタンに表示したかった写真です。

私のIndex.htmlページに私はちょうど置きました：

<button id="alldogs-close-CSS">All Dogs</button>

現時点ではテキストはあまりきれいではありませんが、まだ遊んでいません。ただし、機能します。

于 2015-06-08T04:05:23.063 に答える