Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> CSS Sprite - obrazek jak tło
IceManSpy
post 2.04.2012, 11:01:18
Post #1





Grupa: Zarejestrowani
Postów: 1 006
Pomógł: 111
Dołączył: 23.07.2010
Skąd: Kraków

Ostrzeżenie: (0%)
-----


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?


--------------------
Go to the top of the page
+Quote Post
Crozin
post 2.04.2012, 11:47:30
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

Ostrzeżenie: (0%)
-----


Raczej niemożliwe. W Sprite'sach można co najwyżej powtarzać tło w jednej osi, ale nie w dwóch.
Go to the top of the page
+Quote Post
by_ikar
post 2.04.2012, 12:01:25
Post #3





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post
mortus
post 2.04.2012, 12:11:04
Post #4





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----


@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.
Go to the top of the page
+Quote Post
vokiel
post 2.04.2012, 12:12:35
Post #5





Grupa: Zarejestrowani
Postów: 2 592
Pomógł: 445
Dołączył: 12.03.2007

Ostrzeżenie: (0%)
-----


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.


--------------------
Go to the top of the page
+Quote Post
mortus
post 2.04.2012, 13:28:01
Post #6





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----


Cytat(by_ikar @ 2.04.2012, 13:01:25 ) *
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.


Cytat(vokiel @ 2.04.2012, 13:12:35 ) *
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
Go to the top of the page
+Quote Post
IceManSpy
post 2.04.2012, 14:37:57
Post #7





Grupa: Zarejestrowani
Postów: 1 006
Pomógł: 111
Dołączył: 23.07.2010
Skąd: Kraków

Ostrzeżenie: (0%)
-----


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 smile.gif

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.


--------------------
Go to the top of the page
+Quote Post
by_ikar
post 2.04.2012, 14:40:13
Post #8





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----


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.
Go to the top of the page
+Quote Post
AlexXx
post 5.04.2012, 12:35:07
Post #9





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 5.04.2012

Ostrzeżenie: (0%)
-----


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
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 10.07.2025 - 05:41