1

画像とテキストを組み合わせたフォームの送信ボタンを作ってみました。私はいくつかの方法でやろうとしましたが、問題がありました。HTML:

<form action="www.page.html" method="post"> 
some text
<span>Check The Page</span>
<input type="image" src="check.png" name="Check" alt="Check" width="161" height="30">

CSS:

#reservation span{
display: inline-block;
z-index: 100;
}

#reservation input{
margin-top: -30px;
z-index: -100;
}

問題、その z-index が機能しません。画像はテキストの上に表示されます。div 要素で他の方法を行う場合。HTML:

<form action="www.page.html" method="post"> 
some text
<input type="submit" id="image-button" >Check The Page</input>  
    <div class="check">
      <input type="image" src="check.png" name="Check" >      
  <span>Check</span>
</div>

CSS:

.check { 
   margin-left: 10px;
   position: relative; 
   width: 100%; /* for IE 6 */
}

.check span { 
   position: absolute; 
   left: 0; 
   margin-top: 5px;
   margin-left: 10px;
   color: #ffffff;
   font-family: Calibri;
   font-size: 16px;
   font-weight: bold;
   font-style: italic;
   text-shadow: #222222 1px 1px 0;
   width: 100%; 
}

画像とテキストはきれいに見えますが、ボタンの側面のみがフォームのリンクとして機能し、ボタンの中央はテキスト レイヤーです。何か助けはありますか？:)

4

4 に答える 4

1

これを試して ：

<input type="submit" value="Check The Page" id="image-button" style="background-image:url(check.png);height:500px;width:500px;" ></input>
于 2013-03-26T11:51:40.960 に答える