文本在HTML格式的圖片上可見HTML

我嘗試使圖片和文本一起提交表格的提交按鈕。我嘗試過幾種方式，但是我遇到了問題。 HTML：文本在HTML格式的圖片上可見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%; 
}

然後將圖片和文字看起來不錯，但只有該按鈕的兩側正在爲以下形式的鏈接和按鈕的中間是一個文本層。任何幫助？ :)

來源

2012-08-07 user1384668

#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-07 15:29:31

我已決定使用您的答案，它按我的計劃工作。我也加入了懸停，現在看起來增加了。謝謝大家的幫助:) – user1384668 2012-08-08 09:14:10

<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-07 15:17:05

+1基本HTML勝出。 'button'元素經常被忽略。 – iambriansreed 2012-08-07 15:20:08

mhm，但是文字將會在圖像下方。我希望那些文字能夠通過圖像。 – user1384668 2012-08-07 15:22:24

這裏是一個測試小提琴：http://jsfiddle.net/JjDpq/2/（更新） – Stano 2012-08-07 15:50:05

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

與check.png..or的尺寸更換的高度和寬度，如果你想與圖像修復按鈕大小stretched..add「背景尺寸：100％」爲CSS ..：）

來源

2012-08-07 15:28:19 kakarott

http://jsfiddle.net/JjDpq/4/ – Stano 2012-08-07 15:56:15

試試這個：

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

來源

2013-03-26 11:51:40

文本在HTML格式的圖片上可見HTML

回答

相關問題