創建一個帶背景圖像和文本的自定義HTML按鈕

我想知道如何創建一個具有背景圖像的自定義HTML按鈕，並且可以在該圖像上顯示自定義文本。創建一個帶背景圖像和文本的自定義HTML按鈕

例如，我想顯示一個提交按鈕，其中有一個該按鈕的背景圖像，文本「Submit」出現在該圖像的頂部。

我想這一點 -

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

但是，它不能正常工作。我只是看到測試提交和按鈕，但圖像不顯示。

如果有人能幫我解決這個問題，那將會很棒。

來源

2011-12-09 learner2010

檢查圖像是應該在哪裏，沒有損壞，並且你已經爲它設置了正確的路徑。像Firebug或Chrome的檢查器這樣的工具在這裏非常有用。 – Bojangles

我沒有檢查..圖像是在正確的位置... – learner2010

最簡單的方法可能是使用帶背景的按鈕元素。使用例如填充屬性使按鈕適當大。設置按鈕的背景顏色是一個有用的預防措施，當背景圖像由於某種原因未顯示時使用，使用與文本具有足夠對比度的顏色（所以它應該與顏色使用情況類似於背景圖像）。示例：

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

警告：在舊版本的IE中，在按鈕元素的實現中存在一些錯誤。如果表單有幾個提交按鈕，那麼這些bug最嚴重。

使用input type = submit元素失敗的原因是，它們通常由瀏覽器通過使用內置例程來實現，而這些例程對CSS不起作用。

來源

2011-12-09 19:12:28

我建議您使用<button>而不是<input type='submit' />或<input type='button' />。原因是您可以將HTML元素（嵌套元素）嵌入到<button>元素中。這樣，您可以製作更靈活的按鈕，可以進行更多的自定義設置。

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

來源

2011-12-09 17:33:18

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

你有那麼它涵蓋了您的按鈕以指定圖像的寬度和高度，是檢查圖像的路徑

這正是我在我的CSS之一，平時我做什麼，在這種情況下：

HTML

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

CSS

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

來源

2011-12-09 17:34:49 Andres

寬度和高度標籤不似乎爲我工作... – learner2010

下面是我如何創建帶有實際照片的按鈕以及文本。在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>

現在的文字是不是現在很漂亮，但我還沒有發揮它呢。它確實有效，但。

來源

2015-06-08 04:05:23

創建一個帶背景圖像和文本的自定義HTML按鈕

回答

相關問題