我可以使用csssprite上一個提交按鈕

我有兩個原因，我想用csssprites的提交按鈕：我可以使用csssprite上一個提交按鈕

我是動態創建的按鈕，這在未來可能會被局部
我只想即使我有頁

問題上5個按鈕1個HTTP請求是我想避免爲按鈕的JavaScript，因此我需要使用image類型的input字段。我可以在該字段上設置背景圖像，就像我對任何csssprite一樣。

問題是，我發現我必須將圖像源設置爲空像素，否則我得到一個破碎的圖像圖標。

隨着中說，這是最好的解決方案，我想出了：

<style> 
    .csssprite_cat { 
     background-image:url(http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg); width: 50px; 
     height: 50px; 
    } 
</style> 

<input type=image src="http://www.grasse-ac.com/gif/no_pixel.gif" class="csssprite_cat"> 
<input type=image class="csssprite_cat">

（您可以將此文件只是直接加載到瀏覽器中 - 我是從一個隨機的網站借用圖像）。

它的作品好，但我必須用我們的好老朋友pixel.gif。非常懷舊！

沒有javascript可能沒有更好的方法，除非在CSS中有一種方法來隱藏破碎的圖像文本和圖標。

來源

2009-07-16 Simon_Weaver

不要使用圖像輸入類型，使用bog標準提交按鈕並以此方式設計樣式會更好。

一旦你定義了你的background-image，你需要爲每個你想要使用的按鈕定義獨特的background-positions。

爲了向下兼容我會建議使用類混合物（因爲截至目前IE仍然不支持CSS3屬性選擇器），像這樣：

<input type="submit" class="submit uniqueButtonClass" value="Submit" />

如果你給.submit類background-image屬性，可以爲每個單獨的按鈕獨立設置background-position屬性，並避免多次重複自己。

例子：

.submit { background-image: url(path/to/image.png); width: 50px; height: 25px; border: 0; } 
/* assuming 25px is the offset you're using */ 
.uniqueButtonClass { background-position: 0 25px; }

來源

2009-07-16 20:22:38

嘗試繪製輪廓的舊版瀏覽器沒有問題嗎？ – 2009-07-16 21:11:01

廣告我懷疑這只是改變了現有的按鈕的背景。它不會給我一個乾淨的按鈕 – 2009-07-17 05:49:53

我會使用一個輸入作爲上述類型的，或者你也可以：

<button><img src="http://www.mrfreefree.com/images/speciali/211/funny_cat_50.jpg" /></button>

的button tag讓你幾乎丟了什麼東西，並允許更好地控制格式。

在這種情況下，您可以在按鈕或自己的按鈕中設置一個範圍。

來源

2009-07-16 21:36:23 Davin

我可以使用csssprite上一個提交按鈕

回答

相關問題