背景画像とテキストを含むカスタムhtmlボタンの作成

Question

背景画像を持つカスタムHTMLボタンをどのように作成でき、その画像にカスタムテキストを表示できるかを知りたいと思います。

例えば、私はそのボタンの背景画像を持っている送信ボタンを表示したいと思います。そしてその画像の上にテキスト "Submit"が来ます。

私はこれを試してみました -

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

しかし、それは正しく動作しません。テスト提出とボタンが表示されますが、イメージは表示されません。

誰かがこれで私を助けることができたら嬉しいです。

Answer 1

最も単純な方法は、おそらくバックグラウンドのボタン要素を使用することです。例えばボタンを適切に大きくするためのパディングプロパティ。何らかの理由で背景画像が表示されないときに、テキストと十分なコントラストを持つ色を使用してボタンの背景色を設定すると便利です（色の使用方法は背景画像と似ているはずです） ）。例：

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

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

input type = submit要素を使用した場合の失敗の理由は、それらが通常はCSSの影響を受けないビルトインルーチンを使用するブラウザによって実装されるためです。

Answer 2

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

<button> 
    <span class='image'></span> 
    <span class='text'>Click Me!</span> 
</button> 

Answer 3

<input type="button" value="Submit" style="background: url(pages/images/ButtonBackground.png) no-repeat; width:px; height:px;"> 

あなたはそれがあなたのボタンをカバーして、画像の幅と高さを指定する必要があり、はい画像

のパスを確認し、これは私が私のCSSのいずれかに持っている正確に何であると通常、私はこのような状況で何をすべきか：CSS

HTML

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

.registerbtn{background:url(../images/btn_registro.jpg) no-repeat; width:98px; height:32px; border:none;} 

Answer 4

ここでは、テキストと一緒に実際の写真でボタンを作成した方法を示します。 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> 

今テキストは、現時点では非常にきれいではありませんが、私はまだそれをプレイしていません。しかし、それは動作します。