Jak używać ikonki CSS do powtarzania obrazu tła?

Question

Jest to coś, z czym miałem problem w przeszłości i jest to w moim umyśle, więc zrobiłem prosty przykład obrazu sprite do przetestowania i mam nadzieję, że dostaję kilka odpowiedzi.

Jeśli przeglądać mój kod i demo tutaj http://dabblet.com/gist/2263037

widać, że mam proste div, który wykorzystuje obraz tła

Poniżej tego DIV Mam ten sam div, ale tym razem postaram się zamiast tego użyj obrazu CSS Sprite

Moje pytanie brzmi: czy możliwe jest replikowanie wyglądu pierwszego DIV za pomocą tego obrazu ikonki lub czy potrzebne są zmiany na obrazie ikonki?

Bez Sprite obrazu

/* Notice wrapper with Single Image */ 
.notice-wrap { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #B81900 url(http://www.getklok.com/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; 
} 

Z Sprite obrazu

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite.png) repeat; 
    background-position: 0 -52px; 
} 

HTML

<div class="notice-wrap"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

<BR><BR><BR> 

<div class="notice-wrap-sprite"> 
     <p><strong>NOTICE:</strong> This is just a test notice, no reason to be alarmed</p> 
</div> 

Answer 1

Konfigurowanie ikonki

Można użyć ikonki obrazu, aby robić to, co chcesz. Mogą powtarzać tylko wzdłuż jednej osi, tzn. Powtarzać-x, ale w twoim przypadku to wszystko, czego potrzebujesz. Również obraz wewnątrz ikonki musi przebiegać całą szerokość, tak przeglądarka wie, aby ją ułożyć.

Sztuczka polega na tym, że powtarzające się tło musi rozciągać się na cały obraz FULL WIDTH. To jest kluczowe.Oto obraz, zmodyfikowane w celu spełnienia tego kryterium:

Konfigurowanie CSS

Teraz tylko odwoływać się do niej, jak zwykle, i będzie działać prawidłowo:

/* Notice wrapper with SPRITE Image */ 
.notice-wrap-sprite { 
    margin-top: 10px; padding: 0 .7em; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    border: 1px solid #CD0A0A; 
    background: #fff url(http://f.cl.ly/items/2P1u2S1a132R0B3d2s08/test-sprite3.png) repeat-x; 
    background-position: 0 -52px; 
} 

Answer 2

Chyba trzeba umieścić ikonki na jego własny rząd w tej sprawie. Powinno to zadziałać, ponieważ obraz jest ograniczony pionowo do ustawionej wysokości. Przynajmniej tak to wygląda na przykładzie.

Dodatkowo obraz musi mieć tę samą szerokość co ikonka. Powodem, dla którego obraz tła wymaga rozszerzenia szerokości duszka jest to, że powtarzasz się na osi X i jeśli jest puste miejsce lub inny obraz na lewo od twojego duszka, dostaniesz coś podobnego do twojego przykładu.

W Twoim przykładzie zdjęcia w Twoim ikonce mogą nie pasować do tego tła, ponieważ są tak szerokie. Więc byłoby lepiej, gdybyś wybrał inne obrazy, które pasują do rozmiaru tego obrazu tła, prawdopodobnie więcej obrazów tła, ponieważ zazwyczaj można użyć cieńszych obrazów. Zobacz przykład poniżej, którego używam na jednej z moich stron.

I jak powiedział msigman, możesz dodać repeat-x, aby upewnić się, że tło powtarza się tylko wzdłuż osi X, ale jeśli ograniczyłeś swój div do pewnej wysokości i prawidłowo umieścisz duszek, to repeat-x może nie mieć znaczenia, ale jest bezpieczniejsze.