使用精靈的身體背景

我改變我的網站使用一個精靈圖像，而不是許多單獨的圖像。使用精靈的身體背景

因此我的精靈（1000 x 2000像素）上的第一件事是背景圖像，它是100 x 2000像素。

什麼css看起來像只爲第一個100px重複x？

謝謝

2013-03-14 IIS7 Rewrite

這是怎麼回事與downvote？ – 2013-03-14 03:24:31

@shnisaka - 沒有太多細節？嗯，讓我們看到： 1. html正文標籤 2.使用CSS設置體背景 3.使用子畫面圖像設置體背景 4.背景圖像100×2000個像素 5.背景圖像將被重複水平。 6. css不應該在精靈上顯示其他圖像對不起，你想要什麼更多的細節？ – 2013-03-14 03:41:54

'什麼css看起來像做一個repeat-x只爲第一個100px？'你已經回答了你的問題自己的問題。做repeat-x並指定在你的情況下的寬度和高度100×2000像素..你還需要什麼？ – shnisaka 2013-03-14 03:53:28

其實最好的解決方案是製作3個精靈。

主sprite.png（1000x2000所有圖標和圖像）

的x sprite.png（1像素寬）將其用於全部重複-X背景

的y sprite.png（1px的高度）所有使用它的重複-Y背景

來源

2013-03-14 03:20:36

我的背景使用了一個重複的100px模式，所以在這種情況下，我需要它是100px。你是說x-sprite.png是我的背景圖像在這種情況下（即不是真正的圖像精靈）？ – 2013-03-14 03:26:32

是的，但是你可以添加其他repeat-x背景到x-repeat.png。（如果有的話）在這種情況下將寬度更改爲100px無關緊要 – 2013-03-14 04:12:28

從amazon.com查看此精靈如果您想要appl y重複x到任何圖像，該圖像應該填充精靈圖像的整個寬度。 http://g-ecx.images-amazon.com/images/G/01/common/sprites/sprite-site-wide-2._V146303866_.png – 2013-03-14 04:19:12

三種解決方案：

1 - 改變你對精靈形象contsturction，而不是使用100xwhatever你想要的精靈形象1000x2000的使用和堆疊在底部的其他圖標和圖像

<html> 
<head> 
<style> 
body {background:url('yourspriteimage.png'); background-repeat:repeat-x; width:100px;height:2000px;background-position:0px 0px;} 
</style> 
</head> 
<body> 
your content here 
</body> 
</html>

2-不要渲染你的背景圖像。

3-創建三個子畫面圖像（一個僅用於X-重複，一個只有Y型重複，對不重複）

來源

2013-03-14 03:59:47 shnisaka

不，它不起作用，因爲你將body標籤的寬度設置爲100px（你的css有倒退，但是關心細節），這意味着所有頁面內容必須在100px內，它不會「T。因此，在你的第二個評論取笑這個問題後，我的回覆是「將身體的寬度設置爲100px」。 – 2013-03-14 04:39:19

@ IIS7Rewrite重寫修復了它 – shnisaka 2013-03-14 04:51:47

使用精靈的身體背景

回答

相關問題