Question

我尝试将带有图像和文字的表单的提交按钮放在一起。我曾尝试过多种方式，但我遇到了问题。 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%; 
}

然后图像和文本看起来很好，但是按钮的两侧只作为表单的链接，按钮的中间是文本层。有帮助吗？：）

Answer 1

<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>

Answer 2

<input type="submit" value="Check The Page" id="image-button" style="background-image:url(check.png);height:500px;width:500px;" ></input>

用check.png..or的大小替换高度和宽度，如果你想要一个图像拉伸的修复按钮大小...添加'背景大小：100％'到css .. :)

Answer 3

#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" />

你必须弄乱图像的背景位置，高度和宽度，以及文本对齐以获得你想要的定位，但这应该有效。

Answer 4

试试这个：

<input type="submit" value="Check The Page" id="image-button" style="background-image:url(check.png);height:500px;width:500px;" ></input>

文本在HTML格式的图片上可见

4 个答案: