使用圖片作爲提交按鈕

我想讓我的提交按鈕爲我的登錄頁面是一個圖片，而不是灰色的按鈕。當我使用CSS來做到這一點，我得到了圖片頂部的按鈕。有沒有辦法使用使用圖片作爲提交按鈕

= submit_tag image_tag('image/location.jpg) 'Login', :id => 'Login'

如果我能調整按鈕到一定的尺寸，將工作，以及因爲我可以把它放在我想利用CSS的方法。

謝謝！

來源

2013-04-27 Blackdragon1400

你試過：

.element { 
    appearance: none; 
    -webkit-appearance: none; 
    background-image: url(path/img-png) no-repeat 0 0; 
    background-size: /* (desired size in pixels or %) */ 40px 50px; 
    -moz-background-size: /* (desired size in pixels or %) */ 40px 50px; 
    border: none; 
    outline: none; 
    /* any other desired rules */ 
}

來源

2013-04-27 18:59:09

submit_tag生一個HTML input type='submit'。您需要一個html button，該軌道可以使用button_tag生成。

= button_tag :id => 'Login' do 
    image_tag('image/location.jpg')

來源

2013-04-27 19:02:29 Taavo

據我所知有一個<input type="image" src="..."/>將使圖像作爲一個提交按鈕。我不知道Ruby on Rails，但快速搜索出現了image_submit_tag(source, options = {})。你可以看文檔here。

來源

2013-04-27 19:07:12

這很好，但是有沒有辦法可以改變這個尺寸？它仍然會生成一個「按鈕大小」按鈕，並帶有我想要使用的圖像的背景。 – Blackdragon1400 2013-04-27 19:15:29

@ Blackdragon1400 - 爲標籤添加'width =「x」height =「x」'屬性，使其與您的圖片大小相匹配。我認爲你可以像這樣做'image_submit_tag（source，：size =>「{width} x {height}」）''。 – 2013-04-27 19:21:48

你的上面的代碼應該可以工作，但是圖像仍然沒有被重新調整大小......它在rails服務器上運行，所以它的語法正確，我檢查出來了，所以我不確定問題到底是什麼。 – Blackdragon1400 2013-04-27 19:33:06

與<img>標籤更換<input>按鈕是不是一個好主意，因爲它違反了progressive enhancement原則：你應該讓你的網站儘可能接近，而其enhansing時capabilites瀏覽器允許它。

在你的情況，有一個純CSS溶液變成經典<input type=submit>按鈕爲圖像：

input { 

    /* sizing the button */ 
    width: 10em; 
    height: 10em; 

    /* disabling the system look */ 
    appearance: none; 
    -webkit-appearance: none; 

    /* resetting default browser styler */ 
    border: 0; 
    margin: 0; 
    padding: 0; 

    /* hiding button label */ 
    text-indent: -9999px; 

    /* applying the image */ 
    background: url('http://i.imgur.com/1x8TMLt.jpg') no-repeat transparent; 
    background-size: 100% 100%; /* stretching */ 

    /* letting users know it's clickable */ 
    cursor: pointer; 
}

當CSS是出於某種原因無法使用，按鈕會顯示爲一個文本標籤的按鈕。當CSS可用時，按鈕將顯示爲給定大小的圖像，耶！

演示：http://jsbin.com/okasut/1/edit

當然，你應該使用一些語義選擇。

來源

2013-04-27 19:14:17

使用圖片作爲提交按鈕

回答

相關問題