2012-07-23 82 views
1

我想創建一個精靈,其中有幾個圖像將用作背景。其中一些將與norepeat一起使用,一些將會有repeat-x。從精靈重複背景

設置此類樣式的最佳方式是什麼?

到目前爲止,我已經試過,但它不能正常工作:

CSS

.sprites { 
    background-color: transparent; 
    background-image: url(img/sprites.png); 
     background-repeat: no-repeat; 
} 
.bg { 
    width: 1px; 
    height: 25px; 
    background-position: 0 0; 
    background-repeat: repeat-x; 
} 

HTML

<div class="sprites bg"> 

</div> 

這甚至可能嗎?

回答

1

我覺得去最好的辦法是將非重複BGS反覆們分開。將所有無節制的bgs放入一個精靈圖像中。對於重複的,如果它們具有相同的寬度,則只能將它們放在一起,並且必須將它們垂直放置。

1

如果您只會在x方向重複,請確保垂直放置圖像。也就是說,不要將兩個不同的圖像並排放置。

http://www.phpied.com/background-repeat-and-css-sprites/

+0

使用此方法的唯一警告是容器必須具有明確的高度才能隱藏背景圖像的其餘部分。 – Bojangles 2012-07-23 21:12:43

+0

是的,這是一般使用精靈的警告。 – Andrew 2012-07-23 21:17:02