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

2 
<button type="submit">
<img src="check.png" alt="Check"/>
<br/>
Check The Page
</button>

要将文本放在图像上，您可以尝试下面的代码并更改左侧和顶部的值。另外，请注意，我个人对下面的代码不满意，我更喜欢的替代方法是编辑图像以使文本成为图像的一部分，以防文本不经常更改。

<button type="submit">
<img src="demo.png" alt="Check"/>
<span style="position: absolute; left: 20px; top: 16px;">Check The Page</span>
</button>
于 2012-08-07T15:17:05.203 回答
2 
<input type="submit" value="Check The Page" id="image-button" style="background-image:url(check.png);height:500px;width:500px;" ></input>

用 check.png 的大小替换 height 和 width .. 或者如果你想要一个固定按钮大小的图像拉伸..add 'background-size:100%' to css .. :)

于 2012-08-07T15:28:19.860 回答
2 
#image-button
{
    background-image: url('check.png');
    background-position: left;
    background-repeat: no-repeat;
    background-color: transparent;
    border: 0px;
    width: 161px;
    height: 30px;
    text-align:right;
}

<input type="submit" id="image-button" value="Check the page" />

您必须弄乱图像的背景位置、高度和宽度以及文本对齐才能获得所需的定位，但这应该可以。

于 2012-08-07T15:29:31.123 回答
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 回答