我想知道是否可以使用每個圖像都是16 x 16的sprite作爲大約300px的輸入文本/ textarea的背景。任何人都知道一種方式,或者我應該把他們分成不同的背景。在輸入中使用Sprite圖像
回答
您的需求可能是Diagonal CSS Sprites的理想選擇。
的想法是,可以在一個可變的或較大尺寸的上下文中使用子畫面作爲背景圖像,而不必擔心在子畫面其他圖形顯示出來。
爲什麼一個對角線精靈?
使用構建在對角線上的精靈,在您顯示的組件的下方或右側沒有組件。這允許使用精靈的元素像它需要的那樣寬或高,而不必擔心暴露下一個組件。
當然,這是由於有額外的空白而需要更大的精靈文件大小,但是靈活性通常值得文件大小權衡。
如果您想要將圖像對齊到「左上角」而不是「左上角」,這是否可行? – Jacques
那麼,你可以將每個精靈分開放置在精靈表單中,因此一次只能在盒子中看到一個精靈。
集:
background-repeat: no-repeat;
而對於TextBox2中做到:
background-position: -300px 0;
什麼的。
這不起作用。如果最終獲得足夠寬的元素,它最終會顯示下一張圖片。 – Jacques
是的,當然可以在input
上使用精靈,但如果您關心瀏覽器兼容性,我強烈建議不要這樣做。例如,Internet Explorer 7中的input
元素上的背景圖像不會保留在固定的位置,因此鍵入時背景圖像將會移動。如果您使用的是水平精靈,那可能會造成特別的問題。我建議把input
放在有背景的容器元素中。爲此,請確保瀏覽器和設備與表單元素間距/高度/邊距/填充不一致的每個圖像周圍都有額外的空間。使用重置CSS樣式表在開始時會很有幫助。並再次測試和測試!
- 1. 使用Sprite圖像搜索框輸入按鈕
- 2. 使用sprite-sheet中的圖像更改sprite紋理
- 3. CSS:使用.Less管理Sprite圖像
- 4. 使用CSS從sprite調整圖像
- 5. sprite圖像使用<img>
- 6. 使用CSS和HTML創建Sprite圖像
- 7. 用輸入居中圖像?
- 8. 懸停在sprite中的交換圖像
- 9. 在css中使用sprite工具圖標
- 10. 在輸入字段中嵌入圖像
- 11. CSS Sprite - 位置在輸入的右側?
- 12. 使用CSS sprites輸入圖像
- 13. 使用openCV輸入圖像的座標
- 14. 使用輸入框的圖像旋轉?
- 15. Cocos2d-x Sprite圖像名稱
- 16. sprite vs個人圖像
- 17. 在GDoc中使用圖像PDF輸出
- 18. ThreeJS:在OculusRiftEffect中使用Sprite
- 19. 在谷歌地球上使用Sprite圖像
- 20. 如何使用Php/javascript在輸入字段中添加圖像?
- 21. 在javascript中使用圖像src填充輸入字段
- 22. 從圖像中動態創建XNA sprite
- 23. 調整Haxe中的Sprite圖像大小?
- 24. Javascript從Sprite中獲取圖像對象
- 25. 縮小網頁中的Sprite圖像
- 26. Sprite圖像沒有出現在matter.js上
- 27. 在輸入值中設置圖像
- 28. 如何在medpy.filter.IntensityRangeStandardization()中輸入3D圖像?
- 29. 在Kohana2中輸入圖像類型
- 30. Sprite Atlas - 將@ 3x,@ 2x和@ 1x圖像導入到XCAssets中
背景重複嗎?在什麼方向?你可以發佈圖片/例子嗎? – Tomas