CSS Sprite - obrazek jak tło Opcje

[IceManSpy]

Witam

Męczę się z wykonaniem czegoś takiego: mam obrazek-spirte, w którym mniej więcej w połowie jest kwadracik 5x5 px , który ma być tłem. W jaki sposób wykonać z niego tło powtarzające się w x i y? Nie chodzi mi oczywiście o atrybut backgournd-repeat: repeat.
Jest w ogóle takie coś możliwe?

[Crozin]

Raczej niemożliwe. W Sprite'sach można co najwyżej powtarzać tło w jednej osi, ale nie w dwóch.

[by_ikar]

Jest taka możliwość, o ile ten obrazek zostanie ustawiony w kącie sprita. Jeżeli będzie na środku, to nie "wytniesz go". Musi być w jakimś kącie. A czy to będzie lewy górny, prawy górny, lewy dolny czy prawy dolny to jest obojętne. Ważne żeby był na rogu/w kącie i wtedy będziesz mógł go odpowiednio "wyciąć" w css.

EDIT: a dzieje się tak dlatego, że podając background position, możesz podać tylko lewy/prawy oraz dolny/góry i wtedy zostają jeszcze dwa pozostałe i jeżeli dane tło będzie w narożniku, wówczas zlikwidowanie dodatkowych boków (?) zostaje wyeliminowane przez sam obrazek.

Ten post edytował by_ikar 2.04.2012, 12:03:29

[mortus]

@by_ikar: Koledze nie chodzi o to, aby jego kwadracik o wymiarach 5x5 był tłem elementu HTML o wymiarach 5x5, ale jakiegoś większego elementu. CSS Sprite się tutaj nie przyda.

[vokiel]

Powielenie obrazka ze sprites jest możliwe, ale tylko w jednym kierunku. To o czym pisze by_ikar zadziała, ale tylko dla jednej z osi.

Powielenie po dwóch na raz wymaga odrębnej grafiki.

[mortus]

Jest taka możliwość, o ile ten obrazek zostanie ustawiony w kącie sprita. Jeżeli będzie na środku, to nie "wytniesz go". Musi być w jakimś kącie. A czy to będzie lewy górny, prawy górny, lewy dolny czy prawy dolny to jest obojętne. Ważne żeby był na rogu/w kącie i wtedy będziesz mógł go odpowiednio "wyciąć" w css.

Powielenie obrazka ze sprites jest możliwe, ale tylko w jednym kierunku. To o czym pisze by_ikar zadziała, ale tylko dla jednej z osi. Powielenie po dwóch na raz wymaga odrębnej grafiki.

Bynajmniej. Jeżeli nawet wspomniany kwadracik będzie w lewym górnym rogu, ale po jego prawej i dolnej stronie będą inne elementy całego obrazka (lub też odwrotnie), to nikt nie zrobi z tego tła w ani jednym kierunku. Musiałby to być specyficzny obrazek, tj. elementy musiałyby być albo jeden pod drugim (wtedy możemy zrobić tło w osi x), albo jeden obok drugiego (wtedy możemy zrobić tło w osi y). Nawet jeśli będziemy mieć taki specyficzny obrazek, to nadal nie osiągniemy satysfakcjonujących nas efektów, bo ograniczać nas będzie w pierwszym przypadku wysokość odpowiedniej części obrazka, a w drugim przypadku szerokość odpowiedniej części obrazka. Oczywiście to rozwiązanie może być dobre, albo raczej wystarczające, jeśli będzie dobrze przemyślane. Ale to czy będzie nas satysfakcjonować, to inna sprawa.

Uogólniając CSS Sprite nie nadaje się do tego.

EDIT:
W dodatku autorowi nie chodzi o atrybut background-repeat, a bez background-repeat w ogóle nie da się tego zrealizować. Chyba, że JavaScript wygeneruje miliony malutkich kwadracików o rozmiarach 5x5px z takim samym css i to jeszcze w jakiejś spodniej warstwie.

Ten post edytował mortus 2.04.2012, 13:56:43

[IceManSpy]

Tzn można użyć repeat, ale chodziło mi o to, żeby nie było takiej odpowiedzi:
"użyj repeat, to są podstawy!!"
Bo tą podstawę znam

Mam obrazek 1000px x 500px (przykładowo) i w połowie jest kwadracik 5x5 px przyklejony do lewego rogu. I czy z niego da się zrobić tło. Sprite używałem głównie do pojedynczych obrazków, a nie do tła.

Więc będę musiał wyodrębnić ten plik w takim razie...
Dzięki za pomoc, chyba, że ktoś ma jednak na to rozwiązanie.

[by_ikar]

Zagalopowałem się. Fakt, dla 2 osi nie da się tego zrobić, nawet umieszczając na brzegu obrazek. Akurat to robiłem w przypadku jednej osi (x) i takie coś wyjdzie, pod warunkiem że niczego obok nie będzie, a samo tło będzie zakrywało całą szerokość sprita.

[AlexXx]

Zalecanym sposobem jest oparcie strony o dwa sprity. Poziomy i pionowy. W ten sposób powielasz bez problemu.
Ale musisz się liczyć z tym iż tworząc sprit przykładowo width 100px musisz wszystkie elementu powielane takze oprzec o 100px. wg mnie jest to duzo lepsze rozwiazanie.
Tu masz mój kawałek kodu/sprit http://test.mapy-plemiona.pl/
A tu sam sprit: http://s2.ifotos.pl/img/spritehor_rnwreqa.png

jezeli chcesz powielac konkretne elementy to poczytaj o clip:rect

tu masz link:
http://webmaster.helion.pl/index.php/wyswietlanie