2011-06-21 41 views
3

我想知道是否可以使用每個圖像都是16 x 16的sprite作爲大約300px的輸入文本/ textarea的背景。任何人都知道一種方式,或者我應該把他們分成不同的背景。在輸入中使用Sprite圖像

+0

背景重複嗎?在什麼方向?你可以發佈圖片/例子嗎? – Tomas

回答

9

您的需求可能是Diagonal CSS Sprites的理想選擇。

Diagonal CSS Sprite in Action

的想法是,可以在一個可變的或較大尺寸的上下文中使用子畫面作爲背景圖像,而不必擔心在子畫面其他圖形顯示出來。

爲什麼一個對角線精靈?

使用構建在對角線上的精靈,在您顯示的組件的下方或右側沒有組件。這允許使用精靈的元素像它需要的那樣寬或高,而不必擔心暴露下一個組件。

當然,這是由於有額外的空白而需要更大的精靈文件大小,但是靈活性通常值得文件大小權衡

+0

如果您想要將圖像對齊到「左上角」而不是「左上角」,這是否可行? – Jacques

0

那麼,你可以將每個精靈分開放置在精靈表單中,因此一次只能在盒子中看到一個精靈。

集:

background-repeat: no-repeat; 

而對於TextBox2中做到:

background-position: -300px 0; 

什麼的。

+0

這不起作用。如果最終獲得足夠寬的元素,它最終會顯示下一張圖片。 – Jacques

0

您可以嘗試做到這一點的方法:

LiveChat's sprite

+0

看起來很多精靈看起來像你在這裏插入的那個,但問題是如何在輸入控件中使用它,而沒有其他部分的精靈出現。僞不是輸入控件的選項。 – Jacques

+0

非常容易 - 假設輸入必須有藍色漸變背景(最下面的那個)。你需要做的是將背景設置爲'url(sprite.png)repeat-x 0-225px'(225px是藍色漸變開始的高度)。這樣你可以水平重複漸變,而其他元素不會出現。 – pawlik

0

是的,當然可以在input上使用精靈,但如果您關心瀏覽器兼容性,我強烈建議不要這樣做。例如,Internet Explorer 7中的input元素上的背景圖像不會保留在固定的位置,因此鍵入時背景圖像將會移動。如果您使用的是水平精靈,那可能會造成特別的問題。我建議把input放在有背景的容器元素中。爲此,請確保瀏覽器和設備與表單元素間距/高度/邊距/填充不一致的每個圖像周圍都有額外的空間。使用重置CSS樣式表在開始時會很有幫助。並再次測試和測試!