CSS - 精靈作爲背景圖像

我有一個Web應用程序，我正在努力提高其性能。爲了做到這一點，我決定使用CSS精靈。我已將所有圖像放在名爲images.png的.png文件中。CSS - 精靈作爲背景圖像

CSS sprites對於只顯示一次圖像的所有css類都有效。但是，我的一些圖像需要重複。例如，我有一個用於橫幅背景的banner.png圖像。每當我設置背景重複屬性，似乎圖像不會重複。爲了表示我的CSS定義，在這裏，他們是：

Before CSS Sprites 
------------------ 
.ghwc { 
    background-image: url(/images/layout/banner.png); 
    background-repeat:repeat-x; 
    color:White; 
    width:300px; 
} 

After CSS Sprites 
----------------- 
.ghwc { 
    background-image: url(/images/images.png); 
    background-repeat:repeat-x; 
    color:White; 
    background-position:60px 319px; 
    width:300px; 
}

我的問題是，我該如何使用CSS精靈重複相似圖片的背景？

謝謝

來源

2010-05-18 user208662

我的問題是，我該如何使用CSS精靈重複相似圖片的背景？

你不知道。這根本不可能使用CSS精靈。要做到這一點，你就必須要能夠指定是要重複的圖像的某個區域，而據我所知，在這兩個CSS 2和3

來源

2010-05-18 20:23:39

你也許可以矇混過關的圖像，只在一個方向重複，但它聽起來不像是值得的。我們需要支持打包圖像... – 2010-05-18 20:25:52

@Matti yup，或多部分響應的事情。 – 2010-05-18 20:26:27

你可以創建一個帶有spr背景的div作爲bg，設置寬度和高度，然後在頂部有一個絕對定位的div：D但是如果你這樣做，我很確定某個地方有獨角獸謀殺 – Jason 2010-05-18 20:41:20

是不可能的假設背景圖像（images.png）根本顯示，你的代碼應該可以工作。如果你想在Opera和Firefox上正確渲染，你需要添加

background-attachment：fixed;

編輯：我只是意識到你可能是在談論一個特定的座標在「精靈」的形象由幾個「圖像」的設置。你不會得到任何一個圖像的特定區域重複這樣的。將圖像裁剪爲您所關注的尺寸，然後使用您擁有的代碼。

來源

2010-05-18 20:29:06

我不認爲這是他的問題，而是他現在想要使用該結構作爲背景圖像 - 這是不可能的，只要我可以看到。 – 2010-05-18 20:30:54

是的，編輯來反映這一點。最初沒有意識到他正在談論的是什麼。 – 2010-05-18 20:32:44

如果您只是background-repeat:repeat-x;（如示例中所示），則只需使包含在精靈圖像容器中的所有背景具有相同寬度並垂直放置精靈圖像文件即可。然後，您的背景位置屬性將始終將第一個x位置設置爲0，並將精靈位於第二個y位置（例如background-position:0 0; background-position:0 -100px; background-position:0 -200px;等）。如果您無法指定確切的高度並設置overflow:hidden，則這可能無法在所有瀏覽器中使用。

來源

2010-05-18 20:34:31 mVChr

如果你想使用重複-X，你不能把幾個圖像彼此相鄰在你的精靈作爲整個精靈在X方向重複（因爲你已經注意到了）。但是你可以把它們放在一條垂直線上。（身邊，如果你想使用重複-Y的另一種方法有沒有像「背景作物」到現在爲止（也許在CSS4;？））

來源

2013-01-22 14:32:24

CSS - 精靈作爲背景圖像

回答

相關問題